複数の背景を設置する
毎日寒いですね。鍋がおいしい季節になりましたね。
1つのdiv内にbackgroundで複数の背景を設置します。IE9以上で動作します。
HTML
<div class="bg">
</div>
CSS
.bg{
width: 640px;
height: 470px;
margin: 0 auto;
background:
url(img/demo/161109img_01.png) no-repeat 175px 40px,
url(img/demo/161109img_02.png) no-repeat 70px 180px,
#ddd;
}
デモページ
複数設置する場合は簡単です。カンマで区切ってあげれば複数設置できます。
重なり順は、1番最初に書いたものが1番上にきます。デモだと161109img_01.pngが一番上です。
注意
backgroundで複数の背景を設置するときにrgbaは指定できません。
ex)background:url(img/demo/161109img_02.png) no-repeat 70px 180px,rgba(0,0,0,0.5);
これだとbackgroundが出てきません。
ちなみにグラデーションのlinear-gradientでrgbaは指定できます。この違いが何なのかわかりませんが、rgbaが使えないのは要注意ですね。