如何让CSS mask-image覆盖元素已设置的background-image？

核心问题说明 #

mask-image是CSS遮罩属性，作用是控制当前元素的可见区域，本身不会作为独立内容渲染：mask中纯黑的位置对应元素完全可见，纯白/透明的位置对应元素完全不可见，灰度值对应半透效果。你给#imgone设置opacity: 0会让整个元素（包括被遮罩的内容）完全透明，自然只会显示空白。

现有代码错误点 #

1. 对mask-image的作用逻辑理解偏差，误以为mask本身会显示为内容
2. 给#imgone添加了不必要的opacity: 0属性，导致元素整体不可见
3. #imgtwo的CSS规则中width 100%缺少冒号，属性不生效

最简实现方案 #

如果你需要#imgone区域显示黑色、同时保留mask遮罩能力，直接修改#imgone的CSS规则即可：

#imgone {
  height: 50%;
  width: 100%;
  /* 要显示黑色直接设置背景为黑色即可 */
  background: #000;
  mask-image: linear-gradient(black, black);
  mask-type: alpha;
  mask-mode: alpha;
  /* 兼容Chrome、Safari等webkit内核浏览器，建议添加前缀 */
  -webkit-mask-image: linear-gradient(black, black);
  -webkit-mask-type: alpha;
  -webkit-mask-mode: alpha;
}

如果需要实现渐变遮罩效果，只需要修改mask-image的参数即可，比如要实现从上到下从透明过渡到完全显示的效果：

mask-image: linear-gradient(transparent, black);
-webkit-mask-image: linear-gradient(transparent, black);

完整修正后代码 #

CSS #

.one {
  height: 600px;
  width: 100%;
  mask-image: linear-gradient(black, black);
  mask-type: alpha;
  mask-mode: alpha;
  -webkit-mask-image: linear-gradient(black, black);
  -webkit-mask-type: alpha;
  -webkit-mask-mode: alpha;
}

#imgone {
  height: 50%;
  width: 100%;
  background: #000;
  mask-image: linear-gradient(black, black);
  mask-type: alpha;
  mask-mode: alpha;
  -webkit-mask-image: linear-gradient(black, black);
  -webkit-mask-type: alpha;
  -webkit-mask-mode: alpha;
}

#imgtwo {
  height: 50%;
  width: 100%;
  background-image: linear-gradient(yellow, yellow);
  mask-image: linear-gradient(black, black);
  mask-type: alpha;
  mask-mode: alpha;
  -webkit-mask-image: linear-gradient(black, black);
  -webkit-mask-type: alpha;
  -webkit-mask-mode: alpha;
}

HTML #

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="one">
<div id="imgone"></div>
<p>Content</p>
<div id="imgtwo"></div>
</div>
</body>
</html>

修正后的代码在Firefox ESR中可以正常运行，#imgone会显示为纯黑色，你可以根据需求调整mask-image的参数实现不同的遮罩效果。

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