如何阻止mask-image覆盖div并维持div的背景色？

Hey，我来帮你搞定这个mask-image带来的小坑！你遇到的问题本质上是堆叠上下文的规则在搞鬼，不是div真的变透明了，咱们一步步理清楚：

为啥会出现这种情况？ #

1. 你的z-index没生效：你给div加了z-index:1，但默认情况下z-index只对设置了position（非static）的元素管用，div是默认的static定位，所以这个z-index等于白加。
2. mask-image触发了堆叠上下文：当你给img用了mask-image，这个元素会自动创建一个独立的堆叠上下文。再加上你给img设了z-index:-1，这个值会在它的堆叠上下文里生效，导致img跑到父元素#d的背景层下面。但因为margin-bottom:-150px让img和div重叠了，而div没有自己的堆叠上下文，当div背景是白色时，就会和img透明区域（mask渐变的下半部分）以及页面背景混在一起，看起来像是img透出来了。

怎么解决？ #

只需要让div的层级明确高于img就行，有几种简单的办法：

办法一：给div加定位，让z-index生效

修改div的CSS：

#d > div {
 margin: auto;
 margin-top: 20px;
 width: 80%;
 height: 300px;
 background: white; /* 或者你原来的红白渐变 */
 border: 1px solid;
 position: relative; /* 加个relative定位，激活z-index */
 z-index: 1;
}

办法二：给父元素加定位，规范堆叠范围

给#d加个position:relative，这样img的z-index:-1就会相对于#d生效，而div作为#d的子元素，默认层级就比img高：

#d {
 position: relative;
}

这种方式不用改div的样式，也能解决问题。

办法三：直接删掉img的z-index（最推荐）

其实你用mask-image已经实现了img下半部分透明的效果，根本不需要z-index:-1。删掉这个属性后，img的堆叠顺序会回到HTML的默认规则——div在img后面，所以层级更高，自然能被div的背景完全覆盖：

img {
 width: 100%;
 margin-bottom: -150px;
 mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
 -webkit-mask-image: linear-gradient(
 to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)
 );
 /* 把z-index: -1删掉就行 */
}

试一下？ #

不管用哪种方法，当你把div背景设为纯白色时，它都会稳稳地盖在img上面，不会再出现图片透出来的情况啦！

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