CSS での複数の背景の利用方法

by 4 contributors:

概要

CSS3 より、要素に複数の背景を適用できるようになりました。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。

複数の背景は、以下の様に各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。

.myclass {
  background: 背景1, 背景2, ..., 背景N;
}

この方法は、ショートハンドプロパティの background でも、個別のプロパティ(※背景関連 CSS プロパティ : backgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size) のどちらでも利用可能です。

【訳注: 但し未対応ブラウザの事も考慮するのであれば、当面、ショートハンドでは用いない方がいい場合も多いでしょう。例えば背景色と背景画像をショートハンドでまとめて記述すると、例え背景色の指定が片方のレイヤーにしかなかったとしても、未対応ブラウザではそのルールセット全体が CSS の構文エラーにより無視されてしまう事になるからです。個別に指定すれば少なくとも複数指定がなされていない背景色は適用される事になり、これを本来期待する背景表示の代替として用いる事が出来るからです。】

次の例では、上位レイヤーから

  1. Firefox のロゴ
  2. 線形グラデーション
  3. 花の画像

の順で、3 つの背景が重ねられています。記述量が多くなる場合は、例の様にカンマ毎に改行するとコードが読みやすくなるかもしれません。

.multi_bg_example {
  background-image:
    url("http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png"), /* 最前面の背景レイヤーの背景画像 */
    linear-gradient( to right, rgba(255,255,255,0),  #fff ),
    url("http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg");

  background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
	no-repeat,
	repeat;

  background-position:
    bottom right, /* 最前面の背景レイヤーに対応 */
	left,
	right;
}
スクリーンショット
css_multibg.png

スクリーンショットで表示されているとおり、最初に記述した Firefox のアイコン画像が最前面、次にグラデーション、最後に花の画像が重ねて描画されます。 background-repeatbackground-position に指定した複数の値は、それぞれ background-image で記述した各値に対し、同じ順番で適用されます。つまり、background-image の最初の値として指定した FireFox のアイコンの画像に対し、
background-repeat は "bottom left"、
background-position は "no-repeat"
が適用され、その結果、Firefox のアイコンの画像は、最前面のレイヤーの右下にひとつだけ 表示されるのです。

関連記事

ドキュメントのタグと貢献者

Contributors to this page: ethertank, teoli, Potappo, Piro
最終更新者: ethertank,