In Bootstrap3, how can I make the carousel-caption have a background with 50% opacity?
<p>I need my carousel-caption to have a background with opacity of 50%. I have tried the code below, but it does not work in IE11 or older. I have looked at the older posts on here about it, and none of those solutions work in IE.</p>

<p>I tried this:</p>

<pre><code>.carousel-caption {
background: rgba(255, 184, 28, 0.5);}
</code></pre>

<p>and even this for gradient:</p>

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

<p>HTML:</p>

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

  &lt;!-- Controls --&gt;
  &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
    &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
    &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;       
&lt;!--END CAROUSEL--&gt; 
</code></pre>

<p>CSS:</p>

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

<p><strong>ANSWER:</strong>
I needed to add this to the CSS:
filter: alpha(opacity=50); </p>