今天同事有個(gè)奇葩的需求妆偏，一句話(huà)就是在背景圖上面蒙上一層黑色遮罩，而且只能在background屬性上改動(dòng)叔锐。
原則
background允許你向元素應(yīng)用多個(gè)背景。這些背景相互堆疊讨盒，第一個(gè)背景放在最上面步责，最后一個(gè)背景放在最下面。 僅最后一個(gè)背景允許擁有背景色遂鹊。
也就是說(shuō)些寫(xiě)在最前面的背景在最上面秉扑，只有最后一個(gè)背景可以加上背景色气忠，可以理解為背景色的層級(jí)最低旧噪。
.bg{
background: background1, background2, bgColor background3;
}
background支持圖片和顏色漸變
最繁瑣的方式你可以這么寫(xiě)
.bg{
background-image: url("img1.png"), url("img2.png"), url("img3.png");
background-position: 0 0, 10px 10px, 30px 30px;
background-repeat: no-repeat, no-repeat, no-repeat;
background-size: 10px 10px, 20px 20px, 40px 40px;
}
.bg{
background-image: [background-image], [background-image], [background-image];
background-position: [background-position], [background-position], [background-position];
background-repeat: [background-repeat], [background-repeat], [background-repeat];
background-size: [background-size], [background-size], [background-size];
}
總結(jié)一下就是分別依次寫(xiě)明background的相關(guān)屬性，而background-position/background-repeat/background-size依次對(duì)應(yīng)background-image的圖片順序宦赠。
當(dāng)然勾扭，正常來(lái)說(shuō)不用拆分得這么復(fù)雜，除了background-size比較傲嬌妙色，不肯和別人寫(xiě)一塊之外身辨，其他的屬性都可以縮寫(xiě)在一起芍碧。
.bg{
background: [background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat];
background-size: [background-size], [background-size], [background-size];
}
解決方案
根據(jù)上述的問(wèn)題，我們是不能理想化地這么寫(xiě)的
.bg{
background: rgba(0,0,0,0.7), url("img1.png") 0 0 no-repeat;
}
因?yàn)楸尘吧荒茏鳛樽詈笠粋€(gè)背景圖片的附帶屬性泌豆，不能單獨(dú)拿出來(lái)作為一個(gè)層，所以上面的寫(xiě)法是有語(yǔ)法錯(cuò)誤的猪落。
但是如果按照我們正常的方法寫(xiě)敛滋，也就是說(shuō)只要一個(gè)背景圖片的情況下，雖然背景色寫(xiě)在圖片的前面蜜唾，但是它的層級(jí)永遠(yuǎn)是最低的袁余，這是它擺脫不了的設(shè)定。
.bg{
background: rgba(0,0,0,0.7) url("img1.png") 0 0 no-repeat;
}
那這樣的話(huà)颖榜，最前面提到的那個(gè)需求應(yīng)該怎么實(shí)現(xiàn)呢掩完？
如果你一定只能在background上實(shí)現(xiàn)的話(huà)且蓬，可以在背景圖片前面添加一個(gè)漸變初始值和結(jié)束值一樣的漸變層，也就是說(shuō)寫(xiě)一個(gè)假裝是漸變的顏色層恶阴。
.bg{
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("img1.png") 0 0 no-repeat;
}
總結(jié)一下
- background中漸變和圖片可以作為一個(gè)單獨(dú)的層冯事，定義在最前面的層級(jí)最高昵仅；
- 只有最后一個(gè)圖片層可以帶背景色累魔；
- 除了background-size之外，其他屬性可以縮寫(xiě)在background中定義。
