Html 如何使背景颜色显示在背景图像的顶部

我得到了一张

的

背景图像，希望通过它设置
背景色
，使图像具有暗淡效果。不可能使用
opacity
，因为效果将扩展到我拥有的子元素（在本例中为标题）。我在我的部分中使用了
rgba（0,0,0,5）
，但看起来背景色正好出现在背景图像后面

关于如何让它覆盖整个部分，同时仍然在儿童元素后面，有什么想法吗


正文{
宽度：100%；
}
/*标题*/
#标题{
宽度：100%；
背景：url（../\u img/new\u background.jpg）无重复中心rgba（0,0,0,5）；
背景尺寸：封面；
显示：-webkit flex；
/*用于Safari 7和8*/
显示器：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
-webkit内容：中心；
证明内容：中心；
}
标题{
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
-webkit内容：中心；
证明内容：之间的空间；
}
收割台h1，
标题p：类型的最后一个{
字体系列：“Proxima Nova Extrabold”；
颜色：白色；
文本转换：大写；
字体大小：3.75em；
文本对齐：居中；
}
h1+p{
字体系列：“Palatino”；
颜色：白色；
字号：2.5em；
文本对齐：居中；
}

例子
范例

范例

使用
:before
或
:before


正文{
宽度：100%；
}
/*标题*/
#标题{
宽度：100%；
背景：url(http://zarech63.ru/sites/default/files/imagecache/product_full/product/motor-lodochnyy-suzuki-dt15as_623487.jpg)无重复中心；
背景尺寸：封面；
显示：-webkit flex；
/*用于Safari 7和8*/
显示器：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
-webkit内容：中心；
证明内容：中心；
位置：相对位置；
}
#标题：之前{
内容：''；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
位置：绝对；顶部：0；左侧：0；
}
标题{
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
-webkit内容：中心；
证明内容：之间的空间；
位置：相对位置；
}
收割台h1、收割台p：最后一种类型{
字体系列：“Proxima Nova Extrabold”；
颜色：白色；
文本转换：大写；
字体大小：3.75em；
文本对齐：居中；
}
h1+p{
字体系列：“Palatino”；
颜色：白色；
字号：2.5em；
文本对齐：居中；
}

例子
范例

范例

一个元素上可以有多个背景图像。使用图像作为不透明覆盖，并将其放置在JPEG图像的前面


#测试{
高度：300px；
背景：
/*覆盖层*/
线性梯度（向右，rgba（0,0,0,5）0，rgba（0,0,0,5）100%），
/*jpg img*/
网址（“http://lorempixel.com/400/300/nature/5/");
}
我原以为它可以工作，但里面的标题也变暗了。-添加位置：我会亲自使用这种方法。伪元素现在得到了很好的支持，为了在没有更多标记的情况下实现某些功能，可以很好地使用伪元素。您可以看到支持：p/s：记住对伪元素使用双冒号，即
：before
和
：：after
。