Bootstrap 轮播不透明度图像和文本

Question

我正在尝试使用 Bootstrap Carousel 使背景图像处于低不透明度，标题文本处于满容量。我试图找到一种方法来定位每个滑块图像而不降低文本不透明度。

  <div class="container">
    <div class="row">
        <!-- Carousel -->
        <div id="carousel-example-generic" class="carousel slide" data-      ride="carousel">
      <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>




                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                <li data-target="#carousel-example-generic" data-slide-to="4"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">

            <div class="item active">
            <div class="background">
         <img src="img/DSC00154.jpg" alt="first slide" />
                </div>
                <!-- Static Header -->
                <div class="header-text hidden-xs">
                    <div class="col-md-12 text-center">
                        <h2><span>Leadership</span></h2>
                        <br>
                 </div>
                </div><!-- /header-text -->
            </div>

            <div class="item transbox">
                <img src="img/DSC01961.jpg" alt="Second slide">
                <!-- Static Header -->
                <div class="header-text hidden-xs">
                    <div class="col-md-12 text-center">
                        <h2>
                            <span>Mentorship</span>
                        </h2>
                    </div>
                </div><!-- /header-text -->
            </div><!--item div-->

            <div class="item">
                <img src="img/DSC02637.jpg" alt="Third slide">
                <!-- Static Header -->
            <div class="header-text hidden-xs">
                    <div class="col-md-12 text-center">
                        <h2>
                            <span>Wisdom</span>
                        </h2>
                        <br>
                    </div>
                </div><!-- /header-text -->
            </div><!--item div-->

             <div class="item">
             <img src="img/DSC00130.jpg" alt="fourth slide">

                 <div class="header-text hidden-xs">
                    <div class="col-md-12 text-center">
                        <h2>
                            <span>Community Outreach</span>
                        </h2>
                        <br>
                    </div>
                </div><!-- /header-text -->
            </div><!--item div-->
        </div>
        <!-- Controls -->


    </div><!-- /carousel -->
</div>

CSS

div.background {
background-image:url(../img/DSC00154.jpg);
border: 2px solid black;
}

div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}

希望有一种方法可以直接针对此目标而不破坏轮播插件。

Answer 1

您应该能够使用 :before 伪元素在幻灯片上执行此操作。例如，在您的 item.transbox 类上，将背景图像的 css 和伪元素的不透明度级别放置在伪元素上，这将使您的 div.item 保持 100% 不透明度。

请参阅此 bootply 以供参考：http://www.bootply.com/qoEbTcRDxg