#### 1. 需求說明 --- + 如圖：導(dǎo)航菜單透明，搜索框也是透明的 + 需求：導(dǎo)航菜單透明，搜索框不讓其透明  #### 2. 通過控制臺可發(fā)現(xiàn)導(dǎo)航菜單區(qū)域透明是因為設(shè)置了 `opacity` 屬性 --- **opacity：取值 `0.0 ~ 1.0` 設(shè)置元素透明度，0 完全透明 1 不透明**  **第一時間想到的是給文本框添加 `opacity: 1`**，但是完全沒有效果  **經(jīng)查找資料得出以下結(jié)論** ```html 設(shè)置父元素opacity：0.5，子元素不設(shè)置opacity， 子元素會受到父元素opacity的影響，也會有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` 屬性