今天同事有個奇葩的需求，一句話就是在背景圖上面蒙上一層黑色遮罩，而且只能在background屬性上改動。

大概是這么一個效果

原則

background允許你向元素應用多個背景。這些背景相互堆疊，第一個背景放在最上面，最后一個背景放在最下面。 僅最后一個背景允許擁有背景色。

也就是說些寫在最前面的背景在最上面，只有最后一個背景可以加上背景色，可以理解為背景色的層級最低。

.bg{
  background: background1, background2, bgColor background3;
}

background支持圖片和顏色漸變

最繁瑣的方式你可以這么寫

.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];
}

總結一下就是分別依次寫明background的相關屬性，而background-position/background-repeat/background-size依次對應background-image的圖片順序。

當然，正常來說不用拆分得這么復雜，除了background-size比較傲嬌，不肯和別人寫一塊之外，其他的屬性都可以縮寫在一起。

.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];
}

解決方案

根據上述的問題，我們是不能理想化地這么寫的

.bg{
  background: rgba(0,0,0,0.7), url("img1.png") 0 0 no-repeat;
}

因為背景色只能作為最后一個背景圖片的附帶屬性，不能單獨拿出來作為一個層，所以上面的寫法是有語法錯誤的。

但是如果按照我們正常的方法寫，也就是說只要一個背景圖片的情況下，雖然背景色寫在圖片的前面，但是它的層級永遠是最低的，這是它擺脫不了的設定。

.bg{
  background: rgba(0,0,0,0.7) url("img1.png") 0 0 no-repeat;
}

那這樣的話，最前面提到的那個需求應該怎么實現呢？

如果你一定只能在background上實現的話，可以在背景圖片前面添加一個漸變初始值和結束值一樣的漸變層，也就是說寫一個假裝是漸變的顏色層。

.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;
}

總結一下

1. background中漸變和圖片可以作為一個單獨的層，定義在最前面的層級最高；
2. 只有最后一個圖片層可以帶背景色；
3. 除了background-size之外，其他屬性可以縮寫在background中定義。