CSS实现带遮罩的背景图效果

要实现的效果如下图,前景文字和背景图,同时背景图带有遮罩效果。

方案一:使用background和after伪类组合-伪背景色


原理如上图,div的伪类实现带透明的背景图,div本身background-color实现黑色背景,伪类背景图(透明度0.4)覆盖在黑色背景上面。
html和css代码片段如下:

方案二:使用background和after伪类组合-伪背景图


原理如上图,div的伪类实现带透明的黑色背景色,div本身background实现背景图,伪类背景色(透明度0.6)覆盖在背景图上面。
html和css代码片段如下:

方案三:使用img和background组合

原理类似方案一,img提供透明的图片,父元素提供黑色背景色,img和父元素组合实现需求效果。
html和css代码片段如下:

CSS实现带遮罩的背景图效果