Div背景半透明，不是内容？

Question

我正在尝试制作一个半透明背景的div，但内容完全不透明。这就是我所拥有的：

#mydiv { 
 color: #FFFFFF;
 width: 900px;
 height: 140px;
 border: 0px;
 border-radius: 15px;
 background: #000000;
 opacity: .2;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

有没有办法用CSS做到这一点？

Answer 1

尝试使用：

background-color: rgba(255, 0, 0, 0.2);

Here是关于rgba()的更多信息。

Answer 2

使用CSS3颜色属性rgba。

background-color:rgba(0,255,0,0.5);

Answer 3

所有孩子的透明度与父母一样。这意味着如果你的div的不透明度为0.2，那么他们孩子的不透明度将相当于0.2。

div1 opacity = 0.2
  div2 opacity = 1
    div3opacity = 0.5

意义：

div1 --> real opacity = 0.2 == 0.2
div2 --> real opacity = 0.2 * 1 == 0.2
div3 --> real opacity = 0.2 * 1 * 0.5 == 0.1

Answer 4

#mydiv { 
 color: #FFFFFF;
 width: 900px;
 height: 140px;
 border: 0px;
 border-radius: 15px;
 background: rgba(0,0,0,0.1);
 opacity: .2;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

Answer 5

执行此操作（除CSS3 rgba规则之外）的一个方法是创建一个只有10％不透明度的纯色png。将其用作background-image，下面的示例图片

X X

（10％白色png在上面）