父元素透明度不影响子元素透明度解决方案
1. 需求说明
- 如图：导航菜单透明，搜索框也是透明的
- 需求：导航菜单透明，搜索框不让其透明
2. 通过控制台可发现导航菜单区域透明是因为设置了 opacity 属性
opacity：取值 0.0 ~ 1.0 设置元素透明度，0 完全透明 1 不透明
第一时间想到的是给文本框添加 opacity: 1，但是完全没有效果
经查找资料得出以下结论
设置父元素opacity：0.5，子元素不设置opacity，子元素会受到父元素opacity的影响，也会有0.5的透明度。
即使设置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.5的基础上设置的，因此子元素的opacity还是0.5
3. 解决方案
给父元素设置透明的背景色 background: rgba(0,0,0,0.5)，取代 opacity 属性
本站发布的内容若侵犯到您的权益，请邮件联系站长删除，我们将及时处理！
从您进入本站开始，已表示您已同意接受本站【免责声明】中的一切条款！
本站大部分下载资源收集于网络，不保证其完整性以及安全性，请下载后自行研究。
本站资源仅供学习和交流使用，版权归原作者所有，请勿商业运营、违法使用和传播！请在下载后24小时之内自觉删除。
若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。
