如何用CSS或JS实现两个重叠div的背景图片渐变过渡？

你需要让两个垂直重叠50px的div中，第二个div的顶部50px区域从透明渐变显示自身背景图，同时适配内容高度变化的场景，用CSS的mask属性就能解决这个问题，无需预先生成渐变背景图。

修改后的完整代码： #

CSS

* {
  box-sizing: border-box;
}

div {
  width: 200px;
  min-height: 200px; /* 改为min-height，适配内容高度变化 */
  padding: 10px;
  color: #fff;
}

.one {
  background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/06/picture-0051-300x225.jpg');
}

.two {
  padding-top: 60px;
  margin-top: -50px;
  background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/02/img_1530-large-225x300.jpg');
  /* 顶部50px从透明渐变到不透明的遮罩 */
  -webkit-mask: linear-gradient(to bottom, transparent 0%, black 50px);
  mask: linear-gradient(to bottom, transparent 0%, black 50px);
}

HTML

<div class="one">Unimportant content</div>
<div class="two">More unimportant content.</div>

效果说明： #

• 第二个div的顶部50px区域会从完全透明逐渐过渡到显示自身背景图，和第一个div的背景图自然融合，符合预期的渐变效果
• min-height确保div内容高度变化时，元素能自动调整高度，遮罩效果始终作用在顶部50px的重叠区域
• 该方案完全通过CSS原生属性实现，不需要额外元素或预生成资源，适配性强

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