今天做公司一个项目的时候,又遇到这个问题,给父div设置透明的时候,子div也会跟随透明,就像这样:

background: #000;
opacity: 0.7;

让父div透明,子div不透明的方法

为了不让父div的瑕疵遗传到子级身上,我们可以从父级身上解决问题,既然opacity这个属性会遗传是吧,那我们可以换种方式写呀,background不是有个rgba也可以设置透明嘛,而且background不会继承到子级,这样子就好办了,看效果

background:rgba(0,0,0,.7);

让父div透明,子div不透明的方法

而且,一句代码能搞定的事为嘛非要用两句呢?!

 

对了,推荐一个十六进制颜色值和透明度在线转换rgba的css的工具,必要时用得上!

让父div透明,子div不透明的方法

http://leegorous.net/tools/bg-alpha.html

最后修改:2019 年 11 月 01 日
如果觉得我的文章对你有用,请随意赞赏