#### 1. 需求說(shuō)明 --- + 如圖:導(dǎo)航菜單透明,搜索框也是透明的 + 需求:導(dǎo)航菜單透明,搜索框不讓其透明 ![](https://img.itqaq.com/art/content/960a45b7ba8251555f681e0076db276c.png) #### 2. 通過(guò)控制臺(tái)可發(fā)現(xiàn)導(dǎo)航菜單區(qū)域透明是因?yàn)樵O(shè)置了 `opacity` 屬性 --- **opacity:取值 `0.0 ~ 1.0` 設(shè)置元素透明度,0 完全透明 1 不透明** ![](https://img.itqaq.com/art/content/d47a82d6647895e42a298b06730116bd.png) **第一時(shí)間想到的是給文本框添加 `opacity: 1`**,但是完全沒(méi)有效果 ![](https://img.itqaq.com/art/content/954564b8cc3380d5d113faeb16476966.png) **經(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` 屬性 ![](https://img.itqaq.com/art/content/58eac1fdffd274d2fca26a916ab94842.png)