複数の背景を設置する

毎日寒いですね。鍋がおいしい季節になりましたね。
1つのdiv内にbackgroundで複数の背景を設置します。IE9以上で動作します。

HTML

CSS

デモページ
 
複数設置する場合は簡単です。カンマで区切ってあげれば複数設置できます。
重なり順は、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が使えないのは要注意ですね。