在Bootstrap3中，我該如何讓旋轉木馬標題具有50％不透明度的背景？

我需要我的旋轉木馬標題有不透明度爲50％的背景。我已經嘗試了下面的代碼，但它在IE11或更舊版本中不起作用。我已經看過關於它的舊帖子，而這些解決方案在IE中都不起作用。在Bootstrap3中，我該如何讓旋轉木馬標題具有50％不透明度的背景？

我嘗試這樣做：

.carousel-caption { 
background: rgba(255, 184, 28, 0.5);}

即使這樣的梯度：

.carousel-caption { 
background: linear-gradient(to bottom, rgba(255, 184, 28, 1), rgba(255, 184, 28, 0.5));}

HTML：

<!--START CAROUSEL--> 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> 
    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="../../images/LD/desktop_hero1.png" alt="..." class="img-responsive"> 
     <div class="carousel-caption"> 
     Text for caption 1 here. 
     </div> 
    </div> 
    <div class="item"> 
     <img src="../../images/LD/desktop_hero2.png" alt="..." class="img-responsive"> 
     <div class="carousel-caption"> 
     Text for caption 2 here. 
     </div> 
    </div> 
    <div class="item"> 
     <img src="../../images/LD/desktop_hero3.png" alt="..." class="img-responsive"> 
     <div class="carousel-caption"> 
     Text for caption 3 here. 
     </div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div>  
<!--END CAROUSEL-->

CSS：

<style type="text/css"> 
.carousel-caption { 
max-width: 100%; 
width:100%; 
background: rgba(255, 184, 28, 0.5);}; 
left: 0; 
bottom: 0; 
color:#000000; 
} 
</style>

回答： 我需要將其添加到CSS： filter：alpha（opacity = 50）;

來源

2016-05-03 Ashley K

這應該在IE11的工作，你有沒有嘗試過其他的瀏覽器？另外，張貼您的HTML。 –

它在Firefox中工作，但不是IE。我剛剛添加了我的HTML和CSS。 –

我只是想通了。我只需要添加過濾器：alpha（opacity = 50）;到我的CSS。 –

所有我需要做的是添加下面的款式更新：

filter: alpha(opacity=50);

來源

2016-05-03 21:38:27

在Bootstrap3中，我該如何讓旋轉木馬標題具有50％不透明度的背景？

回答

相關問題