ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。