Bootstrap旋轉木馬不透明度圖像和文本

我想使用Bootstrap旋轉木馬具有低容量的背景圖像與標題文本滿負荷。我試圖找到一種方法來定位每個滑塊圖像，而不會降低文本的不透明度。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; 
}

希望有是針對此情況下直接突破了旋轉木馬插件的方式。

來源

2017-03-23 Breionna Myles

您應該可以使用：before僞元素在幻燈片上執行此操作。例如，在你的item.transbox類中，將CSS的背景圖像和不透明度級別放置在僞元素上，這樣可以讓div.item保持100％的不透明度。

看到這個bootply作爲參考：http://www.bootply.com/qoEbTcRDxg

來源

2017-03-23 16:49:37 user3416558

嘿，這是不工作的原因。 –

Bootstrap旋轉木馬不透明度圖像和文本

回答

相關問題