使引导轮播上的背景图像变暗

Question

我在将图像格式化为较暗以便阅读其上的文字时遇到麻烦。我正在使用bootstrap旋转木马主题，但是图像太暗！不透明度起作用，但它也使文本更透明。据我所知linear-gradient应该工作，但什么也没有发生。我已经在所有类上尝试过了（不仅仅是图像类幻灯片）。

.slide {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 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>

Answer 1

您尝试将设置为background，<img>但由于background-image覆盖了，因此无法正常工作background-color。因此，您可以使用:after或:before创建新的叠加层。

请参阅以下解决方案：

.item:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,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。