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

好的，所以你可以将你的背景图片和信息分成兄弟divs广告，只需使用一点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

也许这会对你有帮助。

function queue(arr, item) { // Your code here *arr.push(item); arr.shift();* return *(arr, item)*; // Change this line } // Display Code console.log("Before: " + JSON.stringify(myArr)); console.log(queue(myArr, 1)); // Modify this line to test console.log("After: " + JSON.stringify(myArr));

观测值：
我认为这就是JSFiddle的含义

改变旋转木马背景的亮度（bootstrap）

2 个答案: