css - 更改轮播背景的亮度( Bootstrap )

Question

我用的是bootstrap，通过这种方式添加了轮播。旋转木马工作正常。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner " role="listbox">
    <div class="item active car1">
        <div class="container carou">
            <div class="carousel-caption">
                <p class="titreCarousel">Example headline.<p>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <a class="lienCarousel text-uppercase" href="#">On vous explique en vidéo</a>
            </div>
        </div>
</div>

 ... x4 almost the same


<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

为了在背景中添加图像，我使用了属性 background: url(../images/bg-5.jpg) no-repeat center;和 background-size : cover;因为有了 <img> ，图像变形了，所以我需要使用背景的属性“cover”。

现在，我想增加这个背景的亮度，但我的问题是当我尝试添加 filter: brightness(50%); 时，文本也继承了这个属性。

我试过的CSS:

.carou
{
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);
    -o-filter: brightness(50%);
    -ms-filter: brightness(50%);
}

有人可以帮我吗？提前致谢!

Answer 1

好的，所以您可以将背景图片和信息分离到同级 div 广告中，只需使用一些 CSS 来相应地定位它们，就像这样...

HTML

<div class="carousel-inner" role="listbox">
    <div class="item active car1">
       <div class="container carou">
            <!-- This div has your background image -->
        </div>
        <div class="car1-info">
            <div class="carousel-caption">
               <p class="titreCarousel">Example headline.<p>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non 
          mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
               <a class="lienCarousel text-uppercase" href="#">On vous explique en vidéo</a>
            </div>
         </div>
     </div>
</div>

CSS

.car1{
    position: relative
}
.car1-info{
    position: absolute;
    top:0;
    left:1em
}
.carou
{
    height:200px; /* or whatever height your banner is */
    background:url(/* your img url */);
    background-size:cover;

    filter: brightness(50%);
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);
    -o-filter: brightness(50%);
    -ms-filter: brightness(50%);
}