浅谈opacity和rgba

背景：

我们既可以制作半透明的边框，又可以制作半透明的背景。

代码：

.rgba{
        background: rgba(255,0,0,0.5);
}
.opacity{
        background: red;
        opacity: 0.5;
 }

当用这两种样式制作半透明背景时，产生效果：

金金金金.png

产生原因：

子元素 opacity 会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

opacity属性的值，可以被其子元素继承。例如，我们将上面图中div里面的文字用p标签括起来，尽管，我们只给div设了不透明度，但是我们的p标签中的文字也是有透明度的。

金金金金.png

总结：

所以RGBA相对于Opacity还是技高一筹的。当然，只要是涉及到颜色的都可以用RGBA来设置，比如上面用到的background-color、text-shadow、box-shadow。