title: In Bootstrap3, how can I make the carousel-caption have a background with 50% opacity?
body: <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>