更改轮播背景的亮度（引导程序）

Question

我正在使用引导程序，并通过这种方式添加了轮播。旋转木马工作正常。

<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>，图像会变形，所以我需要使用背景的属性“封面”。

现在，我想增加这个背景的亮度，但我的问题是当我尝试添加 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%);
}

Answer 2

也许这会对你有所帮助。

@987654321@

观察：
我想这就是Farzad YZ 的意思