css – 在bootstrap轮播上变暗背景图像

我无法将图像格式化为较暗以便阅读它们上的文本.我正在使用bootstrap carousel主题,无法让图像变暗！不透明度有效,但它也使文本更透明.据我所知,线性渐变应该有效但没有任何事情发生.我已经在所有类(不仅仅是图像类幻灯片)上尝试过它.

.slide {
  background-image: linear-gradient(rgba(0,0.7),rgba(0,0.7));
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="carousel-inner" role="listBox">
  <div class="item active">
    <img class="slide"  src="http://placehold.it/800x300" alt="First slide">
    <div class="container">
      <div class="carousel-caption">
        <h1>Welcome to GroupWrites.</h1>
        <p>Where creative writing meets social media. discover our community of writers and readers and experience social writing. </p>
        <p><a class="btn btn-lg btn-primary" href="/register" role="button">Sign up today</a></p>
      </div>
    </div>
  </div>
</div>

解决方法

您尝试将背景设置为< img>但这不起作用,因为背景图像覆盖了背景颜色.因此您可以使用：after或：before来创建新的叠加层.

请参阅以下解决方案：

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="carousel-inner" role="listBox">
  <div class="item active">
    <img class="slide" src="http://placehold.it/800x300" alt="First slide">
    <div class="container">
      <div class="carousel-caption">
        <h1>Welcome to GroupWrites.</h1>
        <p>Where creative writing meets social media. discover our community of writers and readers and experience social writing. </p>
        <p><a class="btn btn-lg btn-primary" href="/register" role="button">Sign up today</a></p>
      </div>
    </div>
  </div>

您可以使用类.item或.carousel-inner来使用该解决方案.