2016/11/09

複数の背景を設置する

毎日寒いですね。鍋がおいしい季節になりましたね。
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が使えないのは要注意ですね。