我正在尝试使用 Bootstrap 旋转木马有一个低不透明度的背景图像与标题文本在全容量。我正在尝试找到一种方法来定位每个滑块图像，而不降低文本不透明度。

<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;
}

希望有一种方法可以直接针对这一点，而不破坏轮播插件。