Css 使引导转盘上的背景图像变暗

为了阅读图片上的文字，我无法将图片的格式设置为较暗。我正在使用引导转盘主题，无法使图像变暗！不透明度起作用，但它也使文本更透明。据我所知，

线性梯度

应该可以工作，但什么也没有发生。我在所有的课程上都试过（不仅仅是图像类幻灯片）

。幻灯片{
背景图像：线性梯度（rgba（0,0,0,0.7），rgba（0,0,0,0.7））；
}

欢迎来到GroupWrites。
创意写作与社交媒体的结合。探索我们的作家和读者社区，体验社会写作

在

img

上设置

背景图像将不起作用，因为背景图像当然在背景中！它被真实的图像掩盖了

你需要做的是在你的图像上覆盖一个半透明的背景。您可以通过为图像的父级
div
设置
background
，并确保其
z-index
高于图像本身来完成此操作


.item{
宽度：400px；
高度：300px；
}
.item.active{
背景：线性梯度（rgba（0,0,0,0.7），rgba（0,0,0,0.2））；
}
.项目.幻灯片{
位置：相对位置；
z指数：-1；
宽度：400px；
高度：300px；
}
您可以设置

欢迎来到GroupWrites。
创意写作与社交媒体的结合。探索我们的作家和读者社区，体验社会写作


您需要将其添加到CSS中

.carousel-caption{
  width:100%;
  height:100%;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.2);
}

下面是实际实现的JSFIDLE链接

另一种方法如下

.item{
Position:relative;
}
.item:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.6);
}

下面是实际实现这一点的JSFIDLE链接。
？？我是不是遗漏了一些关于bootstrap的东西？原因是，除非已调整大小且未上载文件，否则无法查看上的背景。。。