DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css實現半透明效果基本原理
css實現半透明效果基本原理
編輯:CSS詳解     
半透明設置雖然簡單,但是它的應用確實屢見不鮮,而且一旦用在了恰當的地方,會給網頁增色不少,所以我單獨將它拿出來做了一篇單獨的介紹:

1、實現效果/應用舉例

京東商城中

蘑菇街中


等等很多頁面中都存在半透明效果的模塊,現在我們來看一下它的基本原理

2、代碼實現

這個代碼實現如果之前你沒有看過,到了這裡看完你一定會大喊oh,shit!!相信我,你無法想象它的簡單

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>這個能不能實現透明</p>
</div></span>

接下來就是實現的關鍵了,准備高呼吧,吶喊吧,

CSS中增加樣式實現半透明

復制代碼代碼如下:
<span style="font-size:12px;">#top{
opacity:0.1;
filter:alpha(opacity:10);
}</span>

試試看效果啊,是不是成功了,這裡來簡單解釋下上面兩句樣式,兩句其實意思是一樣的,但是由於浏覽器不同,考慮兼容性就將其全部寫上了,後一個主要是針對IE浏覽器應用的濾鏡。

3、其他約束

文字的不透明,只要重新設置p即可

是不是有點瞬間崩潰的感覺,原來這麼簡單,差點就錯過了,不過亡羊補牢,善莫大焉
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved