CSS3で一つの要素に二つ以上の複数の背景画像を設定する方法!

2016/02/21

こんにちは。
今回はCSS3で一つの要素に二つ以上の複数の背景画像を設定する方法!です。

CSS3を使うと一つの要素に二つ以上の複数の背景画像を設置する事ができます。
CSS3なので、IE8には対応してませんが、IE8のサポートも終わったので、そろそろIE8を切ってもいいのではないでしょうか。

CSS3で一つの要素に二つ以上の複数の背景画像を設定する方法!

やり方は簡単で、下記のようにカンマで区切るだけです。

 

実際に書いてみるとこんな感じです。

 

背景画像を重ねる場合は左の方が上に来るので、注意が必要です。

 

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

いかがでしたか。IE8にも対応したい場合はCSS3 PIEを使うと対応する事ができますよ。
以上でCSS3で一つの要素に二つ以上の複数の背景画像を設定する方法!でした。

topへ戻る