#### 1. 需求说明 --- + 如图：导航菜单透明，搜索框也是透明的 + 需求：导航菜单透明，搜索框不让其透明  #### 2. 通过控制台可发现导航菜单区域透明是因为设置了 `opacity` 属性 --- **opacity：取值 `0.0 ~ 1.0` 设置元素透明度，0 完全透明 1 不透明**  **第一时间想到的是给文本框添加 `opacity: 1`**，但是完全没有效果  **经查找资料得出以下结论** ```html 设置父元素opacity：0.5，子元素不设置opacity， 子元素会受到父元素opacity的影响，也会有0.5的透明度。 ``` ```html 即使设置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.5的基础上设置的， 因此子元素的opacity还是0.5 ``` #### 3. 解决方案 --- 给父元素设置透明的背景色 `background: rgba(0,0,0,0.5)`，取代 `opacity` 属性