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旋转木马不透明度图像和文本

回答

相关问题