Is there a way to achieve a background opacity of 50% for my carousel-caption that will work in IE11 or older browsers? I've tried using the code below, but it doesn't seem to be compatible with IE. I've searched through previous posts on this topic, but none of the suggested solutions seem to work in IE.
This is what I have tried:
.carousel-caption {
background: rgba(255, 184, 28, 0.5);}
And even attempted a gradient effect:
.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>
ANSWER: To make it work in IE, you need to add this to the CSS: filter: alpha(opacity=50);