css设置元素背景透明度的2种方式

更新记录

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

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

比如我们同样设置2个<h1>标签

<h1 class="bg-style1">Panda666.com</h1>
<h1 class="bg-style2">Panda666.com</h1>

但使用不同css影响透明度

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

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

导致的结果差异：很明显第一个<h1>的文字受到了影响，第二个<h1>的文字没有受到影响。在实际使用中，根据实际需要选择即可。