background的层级观念

今天同事有个奇葩的需求，一句话就是在背景图上面蒙上一层黑色遮罩，而且只能在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中定义。