如何为Bootstrap 4轮播添加指定线性渐变背景？

我懂你遇到的问题了！直接给carousel-item或carousel-inner加渐变背景没反应，是因为轮播里的<img>是块级元素，它会把背景完全盖住，渐变根本显示不出来。下面给你两个简单有效的解决方案：

方案1：用伪元素添加渐变覆盖层（无需修改HTML） #

这个方法不用动你的现有HTML结构，只需要加几行CSS就行。思路是给每个轮播项创建一个伪元素，让它覆盖在图片上方，同时保证轮播标题能正常显示在渐变层之上：

/* 给轮播项设置相对定位，让伪元素可以基于它定位 */
.carousel-item {
  position: relative;
}

/* 创建伪元素作为渐变覆盖层 */
.carousel-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 你的渐变效果 */
  background-image: linear-gradient(to top, black 0%, transparent 100%);
  /* 控制层级：在图片上方，标题下方（Bootstrap标题默认z-index是10） */
  z-index: 5;
}

记得把这段CSS放在Bootstrap的CSS文件之后加载，这样自定义样式的优先级才会更高，能生效。

方案2：修改HTML结构，给图片套一个容器 #

如果更倾向于调整结构，你可以把每个<img>放在一个容器里，给容器同时设置背景图和渐变，用background-blend-mode混合：

修改后的HTML（以第一个轮播项为例）： #

<div class="carousel-item active">
  <div class="carousel-img-container" style="background-image: url('img/gallery1.jpg');">
    <div class="carousel-caption">
      <h5>item0</h5>
      <p>desc</p>
    </div>
  </div>
</div>

对应的CSS： #

.carousel-img-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  /* 混合背景图和渐变 */
  background-image: linear-gradient(to top, black 0%, transparent 100%), url('img/gallery1.jpg');
  background-blend-mode: overlay;
}

不过这个方法需要给每个轮播项单独设置背景图，相对麻烦一点，所以更推荐方案1。

试一下上面的方法，渐变应该就能正常显示在轮播图片上啦！

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