如何用CSS实现参考图中的图片阴影，提升叠加文字可读性？

需求：为图片上的叠加文字添加阴影效果，提升文字与背景图片的对比度，让文字更清晰可读。当前文字叠加在图片上的可读性不足，现有代码如下：

现有代码 #

CSS #

.launchpad__imageDIV { padding: 38px 38px 18px 37px; position: relative; }
.launchpad__image { width: 100%; }
.refunks__desc { position: absolute; display: grid; grid-template-columns: 1fr; row-gap: 12px; bottom: 3%; left: 6%; }

HTML #

<div className="launchpad__imageDIV">
  <img src={launchpadImage} alt="launchpad" className="launchpad__image" />
  <div className="refunks__desc">
    <div className="launchpad__refunk__class">REFUNKS</div>
    <div className="launch__live__class">LIVE</div>
    <div className="launch__desc">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br />
      sed do eiusmod tempor incididunt ut labore et dolore <br />
      magna aliqua. Ut enim ad minim veniam, quis nostrud <br />
      exercitation.
    </div>
  </div>
  <div className="launch__learn__more">LEARN MORE</div>
</div>

解决方案 #

以下是几种常用的实现方式，可根据需求选择：

1. 为文字添加文本阴影 #

通过text-shadow属性直接增强文字自身的辨识度，这是最简单的方法：

/* 给所有叠加在图片上的文字添加阴影 */
.launchpad__refunk__class,
.launch__live__class,
.launch__desc,
.launch__learn__more {
  color: #ffffff; /* 固定文字为白色，最大化与背景的对比度 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); /* 深色模糊阴影，可按需调整参数 */
}

/* 补充定位，确保LEARN MORE在图片上方 */
.launch__learn__more {
  position: absolute;
  bottom: 3%;
  right: 6%;
}

2. 添加底部渐变遮罩层 #

在图片上方添加从透明到深色的渐变遮罩，让文字所在的底部区域背景变暗，进一步提升可读性：

.launchpad__imageDIV { 
  padding: 38px 38px 18px 37px; 
  position: relative; 
  overflow: hidden; /* 限制遮罩层范围 */
}

/* 用伪元素创建渐变遮罩层 */
.launchpad__imageDIV::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%; /* 调整高度，覆盖文字区域 */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  pointer-events: none; /* 不干扰文字的点击交互 */
  z-index: 0;
}

/* 确保文字在遮罩层上方 */
.refunks__desc,
.launch__learn__more {
  position: relative;
  z-index: 1;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* 定位LEARN MORE */
.launch__learn__more {
  position: absolute;
  bottom: 3%;
  right: 6%;
}

3. 为文字容器添加半透明背景 #

如果只需要文字区域有深色背景，而非全局渐变，可以给文字容器添加半透明背景：

.refunks__desc {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
  bottom: 3%;
  left: 6%;
  padding: 16px 20px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 4px; /* 可选，添加圆角优化视觉效果 */
  color: #ffffff;
}

.launch__learn__more {
  position: absolute;
  bottom: 3%;
  right: 6%;
  padding: 8px 16px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

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