如何为图片底部添加暗化效果以提升叠加文本的可读性？

我来帮你搞定这个问题！图片亮度太高导致底部文本看不清，最实用的解决办法是给图片底部叠加一个渐变遮罩层——既能保留图片主体的亮度，又能让底部区域变暗，完美突出文本。

下面是修改后的代码，我会逐步解释关键改动：

.image {
  height: 450px;
  position: relative;
  width: 256px;
  margin-right: 1.4rem;
  margin-bottom: 3rem;
  cursor: pointer;
  color: white;
}

.image__child {
  position: relative; /* 让伪元素能基于这个容器定位 */
  height: 100%;
  width: 100%;
}

.image__child img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片填满容器，避免拉伸变形 */
}

/* 核心：添加渐变遮罩伪元素 */
.image__child::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 从顶部透明渐变到底部深黑，可自定义参数 */
  background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none; /* 遮罩不拦截鼠标点击，保证图片可交互 */
}

.image__text {
  font-size: 2rem;
  position: absolute;
  bottom: 1%;
  left: 20%;
  line-height: 50px;
  z-index: 10; /* 强制文本显示在遮罩上方 */
}

<div class="image">
  <div class="image__child">
    <img alt="img" src="https://lh3.googleusercontent.com/-MVd7NWMh1oI/Vqrtx00GXQI/AAAAAAAAWT8/PRBTjxMENbY/s800-Ic42/ch%2525C3%2525B3-teacup-pomeranian.jpg" />
  </div>
  <div class="image__text">SOME TEXT</div>
</div>

关键细节说明： #

• 渐变遮罩的自定义：linear-gradient里的60%是渐变开始的位置，你可以改成70%让暗化区域更靠下；rgba(0,0,0,0.7)的最后一个数值是透明度，0.7代表70%不透明，数值越大暗化效果越强。
• 避免遮挡交互：pointer-events: none确保遮罩层不会挡住鼠标点击，用户仍然能正常点击图片。
• 文本层级保障：z-index:10让文本始终处于最上层，不会被遮罩盖住。

如果想调整暗化的色调，比如用深灰色代替纯黑，只需修改渐变颜色即可：

background: linear-gradient(to bottom, transparent 60%, rgba(30, 30, 30, 0.8) 100%);

这样调整后，你的文本就能清晰显示在暗化的底部区域啦！

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