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颜色值是RGB颜色值的扩展，带有Alpha通道 - 指定颜色的不透明度。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

中的第4个参数

  

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作为0-1，您可以更改opacity的第4个参数.main{ background-color: rgba(255,0,0,0.7); width: 100%; height: 200px; /*opacity: 0.5;*/ }

＆＃13;

＆＃13;

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

＆＃13;

UITableViewController

＆＃13;

＆＃13;

＆＃13;