如何用CSS实现图片底部与背景融合的Photoshop效果？

要实现图片底部与黑色背景自然融合的渐变过渡效果，无需修改原始图片，以下是两种实用的CSS方案：

方案一：使用CSS Mask属性 #

这是最简洁的实现方式，通过mask-image给图片添加渐变遮罩，让图片底部逐渐透明，与背景融合：

修改后的代码 #

CSS

div {
  width: 100vw;
  height: 100vh;
  background-color: black;
}

img {
  width: 400px;
  height: 200px;
  padding: 10px;
}

/* 核心融合样式 */
.fade-to-bg {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

p {
  color: white;
}

HTML

<div>
  <p>未处理图片</p>
  <img src="https://sportshub.cbsistatic.com/i/2022/07/09/c71b7102-f1ec-41b5-8362-5597256779ce/team-fortress-2.jpg" />
  <p>预期效果</p>
  <img class="fade-to-bg" src="https://sportshub.cbsistatic.com/i/2022/07/09/c71b7102-f1ec-41b5-8362-5597256779ce/team-fortress-2.jpg" />
</div>

原理说明 #

mask-image会根据渐变的透明度值控制图片的显示区域：

• 渐变起点（顶部）rgba(0,0,0,1)表示完全显示图片
• 渐变终点（底部）rgba(0,0,0,0)表示图片完全透明，背景色会透出来
• 中间过渡区域实现自然融合的效果

方案二：使用伪元素叠加渐变 #

如果需要兼容不支持mask属性的旧浏览器，可以用容器伪元素在图片底部叠加一层从透明到黑色的渐变：

修改后的代码 #

CSS

div {
  width: 100vw;
  height: 100vh;
  background-color: black;
}

.img-wrapper {
  position: relative;
  display: inline-block;
  padding: 10px;
}

.img-wrapper img {
  width: 400px;
  height: 200px;
  display: block;
}

/* 核心融合样式 */
.img-wrapper::after {
  content: "";
  position: absolute;
  bottom: 10px; /* 与图片padding一致 */
  left: 10px;
  width: 400px;
  height: 50px; /* 渐变区域高度，可调整 */
  background: linear-gradient(to bottom, transparent, black);
}

p {
  color: white;
}

HTML

<div>
  <p>未处理图片</p>
  <div class="img-wrapper">
    <img src="https://sportshub.cbsistatic.com/i/2022/07/09/c71b7102-f1ec-41b5-8362-5597256779ce/team-fortress-2.jpg" />
  </div>
  <p>预期效果</p>
  <div class="img-wrapper">
    <img src="https://sportshub.cbsistatic.com/i/2022/07/09/c71b7102-f1ec-41b5-8362-5597256779ce/team-fortress-2.jpg" />
  </div>
</div>

原理说明 #

通过给图片容器添加绝对定位的伪元素，在图片底部覆盖一层渐变遮罩，伪元素的渐变从透明过渡到背景色（黑色），视觉上实现图片与背景的融合。可以通过调整height值控制渐变区域的大小。

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