为何无法同时使用background-image与background-color实现透明色遮罩

核心原理说明 #

• CSS背景的层叠顺序规则：background-color 始终处于所有背景图层的最下方，所有通过background-image设置的背景（包括图片、渐变）都会堆叠在背景色上方。
  你之前直接同时设置背景图和半透明背景色时，半透色被上层的背景图完全遮挡，自然看不到遮罩效果；用渐变替代纯色但仍然把渐变放在图片下方的话，也会出现同样的问题。
• 你现在用的父子DOM方案逻辑：子元素是独立的DOM节点，默认堆叠在父元素内容上方，所以子元素设置半透明背景色时，会透出下方父元素的背景图；如果子元素背景色完全不透明，自然会完全遮挡父元素的内容，这个表现符合CSS的DOM节点层叠规则。

单元素无额外DOM的实现方案 #

不需要额外加子div，直接给承载背景图的元素设置多重背景，把半透色渐变作为上层背景，原图作为下层背景即可，代码如下：

.hero {
  /* 半透明渐变写在前面，作为上层遮罩；原图写在后面，作为下层背景 */
  background-image: linear-gradient(hsla(277, 64%, 61%, 0.5), hsla(277, 64%, 61%, 0.5)), url("https://via.placeholder.com/800");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 50vh;
}

对应的HTML只需要一个节点即可：

<div class="hero"></div>

这种方案相比父子div方案的优势是不需要额外DOM节点，且半透明效果仅作用于背景层，不会影响元素内部的文字、按钮等其他内容的透明度。

常见失效原因排查 #

如果之前用渐变方案没生效，大概率是你把渐变写在了图片地址的后面，CSS多重背景的顺序是写在前面的图层叠在上面，写在后面的图层叠在下面，顺序写反就会导致渐变被图片挡住。

内容的提问来源于stack exchange，提问作者Drew