CSS半透明屬性介紹及代碼實(shí)例

當(dāng)我們?cè)谧鼍W(wǎng)頁(yè)的時(shí)候，有時(shí)為了整體頁(yè)面搭配的美觀，需要設(shè)置層樣式為透明或者半透明，因?yàn)橥该魍墚a(chǎn)生不錯(cuò)的網(wǎng)頁(yè)視覺(jué)效果。在使用的背景的頁(yè)面中，如果不設(shè)置頁(yè)面內(nèi)容區(qū)為半透明狀態(tài)，突出不了背景的作用，也顯得不那么協(xié)調(diào)。用傳統(tǒng)的 CSS 實(shí)現(xiàn)背景半透明效果的方法是用兩個(gè)層，一個(gè)放文字，另一個(gè)做透明背景，但是透明濾鏡的效果會(huì)影響到里面的內(nèi)容。如果只需要在IE下實(shí)現(xiàn)，是有更簡(jiǎn)單的方法可以實(shí)現(xiàn)的。

CSS半透明屬性

CSS 透明度繼承問(wèn)題

CSS 的透明屬性涉及到一個(gè)繼承問(wèn)題，當(dāng)為父級(jí)元素設(shè)置透明度后，子元素將自動(dòng)繼承其透明度，比如下圖的效果:

即使你又為子元素指定透明度為1也是無(wú)效的。

對(duì)于子元素是文字的情況，一般的解決方法是如果多少還能夠看清，就不管。另一個(gè)折中的方法是，為文本子元素指定一個(gè)相對(duì)更深的顏色。也就是說(shuō)，當(dāng)子元素繼承透明度后，所得到的文本顏色正好就是你想要的。前提是這個(gè)顏色還有加深的可能，和需要詳細(xì)的計(jì)算顏色和透明度的值。

還有“取消透明度繼承”的說(shuō)法，這個(gè)說(shuō)法是不太準(zhǔn)確的，實(shí)際上沒(méi)有任何取消透明度繼承的方法。只能說(shuō)，當(dāng)想要實(shí)現(xiàn)“多個(gè)元素覆蓋，只讓指定的元素透明”時(shí)，可以使用的一些Hack。

還有一種不錯(cuò)的實(shí)現(xiàn)方法：添加一個(gè)空元素作為透明層，和不想透明但是要實(shí)現(xiàn)覆蓋效果的元素為同級(jí)元素。父級(jí)元素使用 position:relative 定位; 兩個(gè)子元素使用 position:absolute 定位，實(shí)現(xiàn)覆蓋。具體解釋說(shuō)明請(qǐng)點(diǎn)擊本鏈接

IE下實(shí)現(xiàn)半透明

HTML代碼：

CSS代碼：

兼容FF、OP的寫(xiě)法：

兩個(gè)層重疊的方法改下頁(yè)面結(jié)構(gòu)與CSS樣式

HTML代碼：

CSS代碼：