CSS为div的背景颜色而不是内容添加不透明度

Question

我正在尝试创建一个具有简单背景色和div上一些文本的div。 我想降低此div的背景色的不透明度，但是当我这样做时，div上文本的不透明度也会改变。 有没有办法只更改背景颜色的不透明度？

 .main{ background-color: red; width: 100%; height: 200px; opacity: 0.5; } 

 <div class="main"> <p>Opacity of this text shouldn't be changed.</p> </div> 

Answer 1

使用的RGBA颜色值是具有alpha通道的RGB颜色值的扩展-它指定了颜色的不透明度。

RGBA代表（红色，绿色，蓝色，alpha）

 .main{ background-color: rgba(255, 0, 0, 0.5); width: 100%; height: 200px; } 

 <div class="main"> <p>Opacity of this text shouldn't be changed.</p> </div> 

Answer 2

 .main{ background:rgba(220,0,0,0.2); width: 100%; height: 200px; } 

 <div class="main"> <p>Opacity of this text shouldn't be changed.</p> </div> 

您可以像这样使用CSS。

.main{
 background:rgba(170,0,0,0.2);
  width: 100%;
  height: 200px;
}

Answer 3

您可以使用以下颜色的alpha通道，它是RGBA的第四个参数

rgba（255,0,0,0.1）/ * 10％不透明红色/
rgba（255,0,0,0.4）/ 40％不透明红色/
rgba（255,0,0,0.7）/ 70％不透明红色/
rgba（255,0,0，1）/全不透明红色* /

注意： Red第一个参数为255 ，其他参数为0 ，您可以将第4个参数从0-1更改为opacity

 .main{ background-color: rgba(255,0,0,0.7); width: 100%; height: 200px; /*opacity: 0.5;*/ } 

 <div class="main"> <p>Opacity of this text shouldn't be changed.</p> </div>