#### 1. 需求說明 --- + 如圖:導(dǎo)航菜單透明,搜索框也是透明的 + 需求:導(dǎo)航菜單透明,搜索框不讓其透明  #### 2. 通過控制臺(tái)可發(fā)現(xiàn)導(dǎo)航菜單區(qū)域透明是因?yàn)樵O(shè)置了 `opacity` 屬性 --- **opacity:取值 `0.0 ~ 1.0` 設(shè)置元素透明度,0 完全透明 1 不透明**  **第一時(shí)間想到的是給文本框添加 `opacity: 1`**,但是完全沒有效果  **經(jīng)查找資料得出以下結(jié)論** ```html 設(shè)置父元素opacity:0.5,子元素不設(shè)置opacity, 子元素會(huì)受到父元素opacity的影響,也會(huì)有0.5的透明度。 ``` ```html 即使設(shè)置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基礎(chǔ)上設(shè)置的, 因此子元素的opacity還是0.5 ``` #### 3. 解決方案 --- 給父元素設(shè)置透明的背景色 `background: rgba(0,0,0,0.5)`,取代 `opacity` 屬性 