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

Question

我在将图像格式设置为较暗以便阅读图像上的文本时遇到问题。我正在使用引导轮播主题，但无法使图像变暗！不透明度有效，但它也使文本更加透明。据我所知

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

仅在图像透明或丢失的情况下才可见。您可以使用

:after

或

:before

在图像顶部创建一个新的叠加层，并使用

background

使用半透明

rgba

。

您可以使用

.item

或

.carousel-inner

上的伪类来使图像变暗而不影响文本。

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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 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/

Answer 4

使 Bootstrap 5 轮播上的背景图像变暗的一种方法是使用“::before”伪元素并应用具有透明黑色背景颜色 (rgba(0, 0, 0, 0.5)) 的线性渐变叠加图片顶部。

您可以将以下 CSS 添加到轮播项目中：

  .item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

Answer 5

您可以尝试滤镜

brightness

来调整图像暗度：

body{
  font-family:calibri;
}

div {
  width:200px;
  padding:20px;
  color:#fff;
  position:relative;
  text-align:center;
}

div img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:180px;
  z-index:-1;
  border-radius:8px;
  filter:brightness(40%); /* You can try with filter to give darkness to each image */
}

<div>
 <img src="//picsum.photos/250" />
 <h2>Heading</h2>
 <p>This is my first paragraph</p>
 </div>