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>
的文字没有受到影响。在实际使用中,根据实际需要选择即可。
本文来自博客园,作者:重庆熊猫,转载请注明原文链接:https://www.cnblogs.com/cqpanda/p/16153794.html