怎样让background-color在background-img的上边显示呢？

Question

想给这个div的背景图上加一个遮罩层，但是设置之后background-color总是在背景图之下怎样解决呢？

Answer 1

如果兼容性要求不高，有另一个可选的思路，是使用渐变和多重背景图。因为渐变色gradient也属于background-image，所以题主想要纯色的遮罩，就可以这样写：

background-image: 
linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)),
url(../images/home-bg.jpg);

在多重背景的时候，写在前边的位于上方。

gradient的浏览器要求：http://caniuse.com/#search=gradients
multibackgrounds的浏览器要求：http://caniuse.com/#feat=multibackgrounds

Answer 2

这个问题有几种解决方案:
一、加一层遮罩元素，如div，定位到上层；
二、多用::before伪元素，操作同一
三、选用其它样式属性，如box-shadow

Answer 3

在背景div里再添一下div，width、height都是100%，background-color是rgba(0，0，0，0.7)。

Answer 4

不知道你要面对什么版本的浏览器，现代浏览器支持CSS 3里面的多背景，可以设置多个不同的背景，分别指定不同的background-position

Answer 5

我做了个demo，可以实现在图片上动态添加background-color，即遮罩层。主要用到了z-index，用来区分不同的层。

链接地址：http://yulei521.github.io/input_autofocus/backgroundAndImg.html。可通过鼠标右键查看源代码。
希望对你有所帮助。

Answer 6

border就行

Answer 7

加一个div或者用伪类:before　:after都可以，但是如果后面还要操作的dom的话，不建议用伪类