设置背景半透明,文字不透明效果
一、常见的错误做法
最常见的做法就是:
1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的,严重影响视觉效果。
2.设置background-color:rgba(),这种方式只能设置背景颜色的透明度。
二、正确做法
有两种方法,原理相同:都是要增加一个新盒子,定位到它的上面去。
利用伪元素::before,我们通过给伪元素添加透明背景并且定位到元素中。
原文链接:https://blog.csdn.net/chili_fan/article/details/106891408