#### 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` 屬性