Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8736

【初心者でもわかる】CSSで背景画像やグラデーションを2重や3重につける方法

$
0
0

どうも7noteです。背景画像やグラデーションを指定するときに使うbackgroundプロパティは、

複数指定することができます。

背景の複数指定の方法

background:url(img1.png),url(img2.png),url(img3.png);

background:背景1, 背景2, 背景3と書きます。

この場合重なり順は、

1.img1.png(最前面)
2.img2.png
3.img3.png(最背面)

となります。

repeatやpositionなども、それぞれ個別に指定が可能。

上と同じ書き方でカンマ(,)で区切ることでそれぞれ個別に指定ができます。

background:url(img1.png),url(img2.png),url(img3.png);background-repeat:no-repeat,no-repeat,repeat;

repeatだけでなく、(background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size)それぞれ個別指定可能です。

背景画像の上にグラデーションをかけるなどができるのでかなり重宝するやり方なので、
覚えておいて損はないと思います。

まとめ

backgroundは2重で指定できる事を知らない人もちょこちょこいたので、記事にしました。
背景を2重にするために、わざわざ要素を2個作らなくていいのは便利なので使ってみてください。

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)


Viewing all articles
Browse latest Browse all 8736

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>