今天同事有个奇葩的需求，一句话就是在背景图上面蒙上一层黑色遮罩，而且只能在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;
}
总结一下
- background中渐变和图片可以作为一个单独的层，定义在最前面的层级最高；
- 只有最后一个图片层可以带背景色；
- 除了background-size之外，其他属性可以缩写在background中定义。
