更新记录
本文迁移自Panda666原博客，原发布时间：2021年7月9日。

设置元素的背景的透明度可以使用2种方式：方式1：opacity属性、方式2：使用rgba值。两种方式有一点差异，opacity属性方式设置会导致内容同样被透明度影响。

比如我们同样设置2个

标签

Panda666.com
Panda666.com

但使用不同css影响透明度

/* 样式1 */
.bg-style1 {
    background: red;
    opacity:0.5;
}

/* 样式2 */
.bg-style2 {
    background: rgba(255, 0, 0, 0.5);
}

导致的结果差异：很明显第一个

的文字受到了影响，第二个

的文字没有受到影响。在实际使用中，根据实际需要选择即可。