如何设置父元素不透明度,而不影响到子元素的透明度?

发表日期: 2022-09-12
文章位置: 首页 / 经验分享 / Web经验分享

1需求

css中经常会遇到设置了父元素的透明度,后会直接影响到子元素的透明度


例如

设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。

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

image.png

2解决方法

通过父元素的背景色的不透明度来达到效果,background: rgba(255,255,255,0.75),绕过opacity属性

image.png

3其他常见问题:

去掉边框:border-style: none;

设置圆角:border-radius: 20px;



随便看看

Copyright © 2016-2022 江门蓬江区华越科技公司 版权所有 | 承接软件定制开发,欢迎联系
粤ICP备17073215号