不透明度影响整个内容

Question

twitter如何实现这种透明度？

我尝试在代码中添加不透明度，但每个子元素都受到影响。我的目标有点像上面的图片。我该怎么办？不透明度是不正确的css规则吗？

Answer 1

尝试使用RGBa代替opacity来实现此效果。不透明度属性强制所有子元素也变得透明，并且没有很多简单的方法可以解决这个问题。 RGBa使元素透明，但所有子元素保持不变。

示例：

div {
   background: rgba(10, 10, 10, 0.5); 
}

RGBa中的前三个数字代表RGB值的颜色;第四个表示透明度，应该介于0.0和1.0之间（类似于不透明度属性）。

JS Fiddle Example

RGB Color Chart

Answer 2

background-color：rgba（255,255,255，.5）;

http://www.css3.info/preview/rgba/

Answer 3

CSS opacity将始终以这种方式工作。您始终可以使用半透明png作为背景。