HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用56. マルチバックグラウンド(backgroundの値の複数指定)

      2017/07/11

マルチバックグラウンドとは

CSS3では、backgroundプロパティの値を複数指定できるようになりました。
(Multiple backgrounds)
※Internet Explorer 9以上から対応

Multiple backgroundsの各ブラウザの対応状況
Can I use -CSS3 Multiple backgrounds-

紹介しているプロパティでは、下記のプロパティが該当します。

マルチバックグラウンドの指定方法

指定方法は、値のセットをカンマで区切って指定します。
カンマで区切れば、値のセットはいくつでも指定できます。
重なり順は、最初の値が一番上に重なり、2番目以降は順番に下に重なります。
下記のコードは、アイコン画像とグラーデーションを組み合わせた例です。

コードで使用した画像は、下記からダウンロードできます。
arrow16

マルチバックグラウンドを利用したボタン

値のセットが同じ場合は、1つのセットの指定でも問題ありません。
上記のコードでは、background-repeatの値を1つしか指定していませんが、アイコン画像とグラーデーションにno-repeatが指定されていることになります。
冗長なコードでは下記のようになります。

まとめ

  • マルチバックグラウンドは、CSS3で追加された値のセットを複数指定ができる機能
  • 重ね順は、最初に指定した値のセットが一番上に重なり、2番目以降、順番に下に重なる

 - HTML・CSS