Question

我正在使用carousel作为我的网络应用程序。

显然我正在旋转木马中移动图像，但文本变得非常难以为用户阅读。

所以我认为我可以给包含文本背景颜色的div赋予它一个中低不透明度，但这也会强制文本本身变得透明。

我已使用此reference尝试为我的问题提供解决方案，但它并未解决我的问题。这个解决方案根本不会使背景透明，这会切断我四分之一的图像。

这是我的CSHTML：

<div class="carousel-caption">
    <h1>Another example headline.</h1>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>

CSS：

.carousel-caption {
    background-color: rgba(222,222,222,.5);
    border: 2px solid rgba(222,222,222,.5);
}

所以要清楚..如何保持文字不透明但div的背景是透明的，这样它就不会切断我图像的一部分？

Answer 1

我不明白你所拥有的是什么。只是设置没有不透明度的字体样式？

.carousel-caption {
    background-color: rgba(100,222,300,.2);
    border: 2px solid rgba(100,200,300,.2);
}
.carousel-caption p, .carousel-caption h1{
  color: blue;
}

JSFiddle

背景不透明度

1 个答案: