CSSに2つの背景画像を同時に挿入する方法

複数の背景画像を使用する場合は、最初にbackground-image属性の値をカンマで区切って使用する画像をリストし、次にbackground-repeatを使用して繰り返し属性を定義し、最後にbackground-positionを使用します。それぞれを定義するには、小さな画像の位置で十分です。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

複数の背景画像を使用する場合は、background-image 属性の値をカンマで区切って、使用する画像をリストし、background-repeat を使用して繰り返し属性を定義します。それぞれの小さな画像の位置を定義するには、background-position を使用します。

HTML コード:

<div></div>

CSS コード:

background-image: url(images/scroll_top.jpg),
                  url(images/scroll_bottom.jpg),
                  url(images/scroll_middle.jpg);
 
background-repeat: no-repeat, no-repeat, repeat-y;
 
background-position: center top, center bottom, center top;

scroll_top.jpg

scroll_middle.jpg

#scroll_bottom.jpg

background-repeat とbackground-position で複数の値を定義する場合、その順序は定義 それぞれ背景画像の順序に対応します。

省略形:

上記で定義した方法は、特に後で再配置または保守する必要がある場合に、混乱を招く可能性があります。したがって、多くの Web デザイナーは、略語を使用して複数の背景画像を指定することを好みます。

CSS コード:

background: url(images/scroll_top.jpg) center top no-repeat,
            url(images/scroll_bottom.jpg) center bottom no-repeat,
            url(images/scroll_middle.jpg) center top repeat-y;

画像が URL で定義されるたびに、画像の位置と繰り返し方法が定義されます。

重要なポイント:

複数の背景画像は、Photoshop のレイヤーと同じように、上下に積み重ねられます。背景画像がリストされる順序によって、どの画像が一番上に来るかが決まります。リストされた最初のイメージは最上位レベルにあり、2 番目のイメージは 2 番目のレベルにあり、最後のイメージは最下位レベルにあります。前のコードを例にとると、スクロールの上部 (scrollTop.jpg) はスクロールの下部 (scrollBottom.jpg) より上にあり、下部はスクロールの中央 (scrollMiddle.jpg) より上にあります。

以上がCSSに2つの背景画像を同時に挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。