Question

我无法将图片格式化为较暗以便阅读其上的文字。我使用bootstrap carousel主题并且不能让图像变暗！不透明度有效，但它也使文本更透明。据我所知，linear-gradient应该正常工作，但一切都没有发生。我已经在所有类（不仅仅是图像类幻灯片）上尝试过它。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您尝试将background设置为<img>，但这不起作用，因为background-image覆盖了background-color。因此，您可以使用:after或:before来创建新的叠加层。

请参阅以下解决方案：

＆＃13;

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

＆＃13;

<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>

＆＃13;

您可以使用课程.item或.carousel-inner。

来使用该解决方案

Answer 2

在background-image上设置img无效，因为背景图片当然在后台！它被实际图像掩盖了。

您需要做的是在图片顶部叠加半透明背景。您可以通过为图片的父background设置div并确保其图片高于图片本身z-index来完成此操作。

.item {
  width: 400px;
  height: 300px;
}
.item.active {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
}
.item .slide {
  position: relative;
  z-index: -1;
  width: 400px;
  height: 300px;
}

<div class="item">
  <img class="slide"  src="http://placehold.it/400x300" alt="First slide">
</div>
<div class="item active">
  <img class="slide"  src="http://placehold.it/400x300" alt="First slide">
</div>

Answer 3

您需要将其添加到CSS

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

这是实际实现的JSfiddle链接。 https://jsfiddle.net/ghayyourspyko/tc0ksnex/1/

另一种方法如下

.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);
}

JsFiddle链接的实际实现如下。 https://jsfiddle.net/ghayyourspyko/jscgdLdu/1/

在bootstrap轮播上变暗背景图像

3 个答案: