半透明設(shè)置雖然簡(jiǎn)單，但是它的應(yīng)用確實(shí)屢見不鮮，而且一旦用在了恰當(dāng)?shù)牡胤?，?huì)給網(wǎng)頁(yè)增色不少，所以我單獨(dú)將它拿出來做了一篇單獨(dú)的介紹：

1、實(shí)現(xiàn)效果/應(yīng)用舉例

京東商城中

蘑菇街中

等等很多頁(yè)面中都存在半透明效果的模塊，現(xiàn)在我們來看一下它的基本原理

2、代碼實(shí)現(xiàn)

這個(gè)代碼實(shí)現(xiàn)如果之前你沒有看過，到了這里看完你一定會(huì)大喊oh,shit!!相信我，你無法想象它的簡(jiǎn)單

html代碼中

代碼如下:

<span style="font-size:12px;"><div id="bottom" style="width: 500px;height: 500px;background: url('img/2.jpg');">

<div id="top" style="width: 100px;height: 100px;background-color: yellow;"></div>

<p>這個(gè)能不能實(shí)現(xiàn)透明</p>

</div></span>

接下來就是實(shí)現(xiàn)的關(guān)鍵了，準(zhǔn)備高呼吧，吶喊吧，

css中增加樣式實(shí)現(xiàn)半透明

代碼如下:

<span style="font-size:12px;">#top{

opacity:0.1;

filter:alpha(opacity:10);

}</span>

試試看效果啊，是不是成功了，這里來簡(jiǎn)單解釋下上面兩句樣式，兩句其實(shí)意思是一樣的，但是由于瀏覽器不同，考慮兼容性就將其全部寫上了，后一個(gè)主要是針對(duì)ie瀏覽器應(yīng)用的濾鏡。

3、其他約束

文字的不透明，只要重新設(shè)置p即可

是不是有點(diǎn)瞬間崩潰的感覺，原來這么簡(jiǎn)單，差點(diǎn)就錯(cuò)過了，不過亡羊補(bǔ)牢，善莫大焉

更多信息請(qǐng)查看IT技術(shù)專欄