Question

我需要我的旋转木马标题，背景的不透明度为50％。我已经尝试过以下代码，但它在IE11或更早版本中无效。我已经在这里看过关于它的旧帖子，这些解决方案都不适用于IE。

我试过了：

.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）;

Answer 1

我需要做的就是添加以下样式更新：

filter: alpha(opacity=50);

在Bootstrap3中，如何使旋转木马标题具有50％不透明度的背景？

1 个答案: