1、问题提出:很多情况下,我们可能需要给页面上的某些元素添加一个背景,然后通过虚化背景实现有个透明层的效果。需要达到的效果如下:
2、预想的处理方式:在景点卡的div元素设置一个白色背景,并设置白色背景的透明度为0.2。
3、实际处理达到的效果
设置样式为:
background-color: white;opacity: 0.2;
实际效果为:
从实际效果可以发现,不仅仅背景达到了透明的效果,在div元素内的其他子元素也具备了相同的透明效果,导致其他元素看不清或看不见。
4、问题原因
使用opacity进行透明度设置会对透明元素的子元素也添加透明效果。
5、解决办法
不使用opacity进行透明度设置,而改用rgba()进行设置。写法如下:
background-color: rgba(255,255,255,0.2);
其中255,255,255为rgb颜色,用来设置背景颜色,0.2是背景的透明度设置。
最终的实际效果为: