背景画像の複数指定

こんにちは。管理人のオッサンです。

試験問題サンプルから、今日は背景画像の指定
“background-image”についての復習です。

今更な感じがしますが、実は、
これに画像を複数指定できることを知りませんでした。

ある領域に画像を複数枚指定して、
“gackground-position”で場所指定をすると、
2枚重ねて表示できるんですね。

大きい背景に小さいアイコンを重ねたりできる。

また小さいアイコン同士なら領域内に自由に配置できる。

なるほどこれは使い道がありそうです。

書き方は、普通の書き方にカンマで区切って追加するだけだそうです、

 background-image: url(img/ドクターのアイコン素材.png) ,url(img/家のアイコン素材.png),url(img/お茶碗と箸.png);
 background-repeat: no-repeat ,no-repeat,no-repeat;
 background-size: auto,auto,auto;
 background-position: 10% 10%,80% 80%,10% 80%;

簡単ですね。

今回参考にしたサイトはこちら。

https://www.sejuku.net/blog/55771

で、これに紹介されたいた方法で、
一枚目をグラデーションにして、
透明度を上げると、
なんともかっこいい感じになるそうです。