html - 更改背景不透明度保留文本

Question

我想降低我的 carousel-caption 的不透明度，但文本也变得不透明，有什么办法可以克服这个问题吗？我正在使用 bootstrap 并且希望让事情尽可能简单。是否可以在不使用类似以下内容的情况下实现此目的:background-color: rgba(0, 0, 0, 0.2);？

HTML:

<div class="carousel-caption">
   <h1 class="carousel-caption-header">Heading for random text</h1>
   <p class="carousel-caption-text"> 
   Random text random text random text random text random text random text
   </p>
</div>

CSS:

.carousel-caption {
    background-color: black;
    opacity: 0.2;
 }

Answer 1

然后使用 background-color: rgba(0, 0, 0, 0.2)，如您所指。 opacity 不仅仅是背景不透明度。它也改变了文本的不透明度。或者你可以使用

background-color:#00000033