p標(biāo)簽: CSS的透明效果是我們網(wǎng)頁(yè)設(shè)計(jì)中常用到的一種效果。透明度能夠讓我們的網(wǎng)頁(yè)看起來(lái)更加美觀與時(shí)尚。 有時(shí)我們需要對(duì)一個(gè)元素設(shè)置透明效果，但是希望其子元素不繼承該透明效果，該怎么做呢？ 一般情況下我們對(duì)元素的透明度調(diào)節(jié)都是使用opacity之類的css屬性完成的。 但如果我們直接在父元素上設(shè)置透明度，程序會(huì)自動(dòng)將透明度繼承給子元素。 如下面這個(gè)例子： pre標(biāo)簽:

.father{
background-color:rgba(0,0,0,0.5);  /* 父元素的背景色 */
}
.son{
background-color:rgba(255,255,255,1);  /* 子元素的背景色 */
opacity:0.8;  /* 子元素的透明度 */
}

那么，要達(dá)到讓父元素透明，而又不讓子元素繼承透明度的效果，該怎么做呢？ 這里有一種有效的方法：使用偽元素pseudo-element進(jìn)行處理。 我們可以通過(guò)在父元素中添加before或after偽元素，然后在偽元素中定義背景色和透明度，這樣通過(guò)在父元素上設(shè)置背景色后，我們就可以通過(guò)在偽元素中設(shè)置一個(gè)白色的半透明背景色，并不會(huì)影響到子元素，同時(shí)還保持了父元素的透明效果。代碼如下： pre標(biāo)簽:

.father{
position:relative;  /* 確保偽元素相對(duì)父元素定位 */
background-color:rgba(0,0,0,0.5); 
}
.father::before{
content:"";  /* 偽元素必須加content屬性 */
position:absolute;  /* 偽元素絕對(duì)定位 */
top:0;left:0;bottom:0;right:0;  /* 四個(gè)方向同時(shí)鋪滿 */
background-color:rgba(255,255,255,0.8);  /* 偽元素半透明白色背景 */
z-index:-1;  /* 將偽元素放到底層，不影響其他元素 */
}

代碼中，我們首先將父元素設(shè)置為相對(duì)定位，然后在父元素中添加一個(gè)before偽元素，并將其設(shè)為絕對(duì)定位，并鋪滿父元素。接下來(lái)，我們?cè)趥卧刂性O(shè)置一個(gè)半透明白色的背景色，這樣通過(guò)在父元素上設(shè)置背景色后，我們就可以通過(guò)偽元素設(shè)置的半透明白色背景色，來(lái)保持其透明度效果，同時(shí)不影響子元素。