css中opacity属性错用导致子元素颜色异常

最新推荐文章于 2022-11-21 07:00:00 发布

sumikk

最新推荐文章于 2022-11-21 07:00:00 发布

阅读量480

点赞数

文章标签： css

本文链接：https://blog.csdn.net/sumikk/article/details/123844799

版权

1.opacity的用法总结

作用：设置元素的透明背景

取值：

(1) 取值范围0~1

(2) 0表示完全透明，1表示完全不透明

2.误用导致子元素颜色问题

.father {
    width:100px;
    height:100px;    
    background-color: #fff;
    opacity:0.5;
    padding: 10px;
}

.son {
    width:30px;
    height:30px;
    background-color: red;
}

如此使用子盒子的颜色并不是'red'

正确给父盒子添加虚化背景：

.father {
    width:100px;
    height:100px;    
    background-color: rgba(255,255,255,0.5);
    padding: 10px;
}

.son {
    width:30px;
    height:30px;
    background-color: red;
}