嗨，这个需求太常见啦！不用手动修改图片，CSS确实有好几种实用方法能实现你要的暗化效果，让轮播图上的文字更清晰。我给你拆解几个靠谱的方案：

1. 伪元素叠加半透明遮罩（最推荐，不额外加DOM） #

这是最常用的方法，不用在HTML里多写额外的div，靠CSS伪元素就能在图片和文字之间加一层半透明的深色遮罩，既不破坏原有结构，还能灵活调整暗度。

举个实际的代码例子：

HTML结构 #

<div class="slide">
  <img src="your-slide-image.jpg" alt="轮播图">
  <div class="slide-text">这里是需要突出显示的文字内容</div>
</div>

CSS样式 #

.slide {
  position: relative; /* 让伪元素相对于轮播项定位 */
  overflow: hidden; /* 防止图片溢出容器 */
}

/* 生成遮罩的伪元素 */
.slide::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 最后一个值是透明度，0.4代表40%的黑色遮罩，数值越大图片越暗 */
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1; /* 确保遮罩在图片上方、文字下方 */
}

.slide-text {
  position: relative;
  z-index: 2; /* 让文字浮在遮罩上方 */
  color: #fff; /* 白色文字在暗化背景上更显眼 */
  /* 可自定义文字位置与样式 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
}

这个方法的好处是遮罩的颜色和透明度都能随意调整，比如想偏蓝调就把rgba(0,0,0,0.4)改成rgba(0, 20, 50, 0.5)，完全按需定制。

2. 用background-blend-mode（适合图片作为背景图的场景） #

如果你的轮播图是通过background-image设置的（而非<img>标签），可以用CSS混合模式把背景图和深色叠加，实现暗化效果：

.slide {
  width: 100%;
  height: 400px;
  background-image: url('your-slide-image.jpg');
  background-size: cover;
  background-position: center;
  /* 混合模式选择darken，让图片与深色背景混合变暗 */
  background-blend-mode: darken;
  /* 配合深色背景调整暗度，透明度越高，图片越暗 */
  background-color: rgba(0, 0, 0, 0.3);
}

你也可以试试multiply这个混合模式，效果和darken类似，细微差异可以自己对比选择。

3. 用filter: brightness()（注意影响范围） #

这个方法是直接给图片加亮度滤镜，降低整体亮度，但要注意：如果文字和图片在同一个容器里，滤镜会连文字一起变暗，所以需要把文字单独隔离或调整层级：

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 0.7代表70%的原亮度，数值越小图片越暗 */
  filter: brightness(0.7);
}

.slide-text {
  position: relative;
  z-index: 1;
  color: #fff;
  /* 将文字定位到图片上方 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

不过这个方法的缺点是，图片本身的明暗差异会被放大，暗部更暗、亮部也变暗，效果不如遮罩均匀，所以更推荐第一种伪元素方案。

其实你之前在Elementor里用到的那个功能，底层就是用类似第一种的遮罩方法实现的，所以用伪元素的方案最接近你熟悉的效果～

备注：内容来源于stack exchange，提问作者user28205969