今回は個人的に知っておくと便利だなと思うcssの小技part12 -複数の背景要素-です。
バックナンバー
cssで複数の背景画像・背景色を指定する
1箇所の背景に複数の画像や色を指定したいという事があるかと思います。そんな時に使える方法です。
グラデーションもあるので複雑なように見えるかもしれませんが、案外簡単です。
DEMO
HTML
|
1 2 |
<div class="multibg"> </div> |
css
|
1 2 3 4 5 6 7 8 |
#c01 .multibg{ width: 500px; max-width: 100%; height: 400px; background:url(img01.png) no-repeat 45% 42%, url(img02.png) no-repeat 60% 58%, linear-gradient(to right, #1e5799 0%,#29d18b 100%); } |
とりあえず通常通りbackgroundで指定をしていきます。
あとはカンマで区切って要素を指定していくだけです。
慣れないうちだとどれが一番上になるかぴんと来ないかもしれませんが、純粋に1番最初に書いたものが1番上という形になります。
どんどん下に書いていくと下に重なっていくようなイメージです。
