在前端开发中,我们经常使用CSS3 的opacity属性来设置元素的透明度。但是opacity属性在父子元素间设置存在问题。

假如我们给父元素设置 opacity:0.5,子元素不设置opacity,子元素就会受到父元素opacity的影响,也会有0.5的透明度。

即使设置子元素opacity:1,子元素的opacity:1 也是在父元素的opacity:0.5的基础上设置的,因此子元素的opacity还是0.5。

所以给父子间某一元素设置透明度时,我们可以使用这种方法:

为父元素设置background: rgba(0,0,0,0.5),去掉opacity属性,或者设置为unset



前端     

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!