CSS中可以通过设置opacity属性来实现背景颜色半透明的效果,但是这种方法会同时影响元素的内容和背景。 .opacity{ background-color: rgba(255,255,255,0
CSS中可以通过设置opacity属性来实现背景颜色半透明的效果,但是这种方法会同时影响元素的内容和背景。
.opacity{ background-color: rgba(255,255,255,0.5); /*rgba中的最后一个参数0.5代表透明度为50%*/ }
如果只想要背景颜色半透明,而不影响元素内容的透明度,需要使用伪元素和绝对定位来实现。
.half-opacity{ position: relative; } .half-opacity::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(255,255,255,0.5); z-index: -1; /*伪元素要在原来元素下面,需要设置z-index*/ }
以上代码中,.half-opacity 是需要设置背景半透明的元素的类名。通过设置position为relative,然后使用伪元素 ::before 和 absolute 相对于该元素定位。在伪元素中设置背景颜色,并使其占据整个元素位置,再设置z-index为负值使伪元素在原元素下面。
这样设置后,就可以通过调整 rgba 中的最后一个参数来控制背景颜色的透明度,同时保留元素的内容不受影响。
粉丝
0
关注
0
收藏
0