opacity
使用CSS的opacity属性设置透明度时踩坑:
如果父元素有opacity属性,那么无论如何,子元素都会继承这个属性,
.header-banner-item{
opacity: 0.8;
&.sign{
position: relative;
.calender{
position: absolute;
opacity: 1 !important;
}
}
}
![78aa7ac399e105cb9987d6222022ae4e.png](https://i-blog.csdnimg.cn/blog_migrate/b4f27f126212a193002d15aae7609a52.jpeg)
即便加上 !important 也无济于事
除非,子元素的opacity值小于父元素才能生效
.header-banner-item{
opacity: 0.8;
&.sign{
position: relative;
.calender{
position: absolute;
opacity: .3 !important;
}
}
}
![75ab02f747a79dbe8c852ef831a97ab0.png](https://i-blog.csdnimg.cn/blog_migrate/ccebbd74b675f97ad9e383a6d053c3bb.jpeg)
只能比父元素更透明
解决办法:使用rgba的a值来设置透明度
.header-banner-item{
color: rgba(255,255,255,.8)
&.sign{
position: relative;
.calender{
position: absolute;
background-color: rgba(255,255,255,1)
}
}
}
![3d0bfd9d48547ff887703eca7fbb3b4e.png](https://i-blog.csdnimg.cn/blog_migrate/ab77f060ff483a52d19cc3a0470249b8.jpeg)