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
属性