亚洲免费不卡_在线视频精品_国产尤物精品_久久久久网址_久久精品91_欧美va天堂在线_狠狠入ady亚洲精品_亚洲午夜精品福利_国产精品草草_午夜精品久久99蜜桃的功能介绍

半透明設置雖然簡單，但是它的應用確實屢見不鮮，而且一旦用在了恰當的地方，會給網頁增色不少，所以我單獨將它拿出來做了一篇單獨的介紹：

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即可

是不是有點瞬間崩潰的感覺，原來這么簡單，差點就錯過了，不過亡羊補牢，善莫大焉

更多信息請查看IT技術專欄