CSS透明實現方法(1/3)

　　一、舊的opacity設定
　　以下代碼是firefox和safari舊版本所需的透明度設定:

 

代碼如下	複製代碼
#myelement {      -khtml-opacity: .5;      -moz-opacity: 0.5;  }

-khtml-opacity設定是針對舊版本的webkit渲染引擎，這種專用屬性現在已經過時了，除非你還有需要相容safari 1.x.的使用者。
　　第二行使用專用屬性 -moz-opacity是 為了相容mozilla渲染引擎的早期版本，以及追溯到netscape navigator。firefox 0.9以後就不要求使用-moz-opacity屬性，firefox 3.5（現在使用gecko引擎）已經不在支援這個屬性。

　　二、在firefox, safari, chrome和opera下的css透明度
　　以下代碼是除了ie外的所有當前瀏覽器的最簡單，最最新的不透明度設定的css文法：

 

代碼如下	複製代碼
#myelement { opacity: .7; }

　　上述文法將設定一個元素為70％不透明（或30%透明）。設定opacity:1將使元素不透明，而設定opacity:0將使得元素完全不可見。你 只要記住“opacity”等同於“不透明”就很容易記住了，opacity值越小就越接近透明。
　　opacity屬性可以精確地小數點後兩位，所以值取“.01”和“.02”實際上是不同的，雖然可見度很難被發覺。一般情況下，精確到一位就可以了，取值如“.3”或“.7”。

　　三、ie下的css透明度
　　ie下照舊有別於其他瀏覽器，並且目前也有三個不同版本的ie在廣泛使用，透明度設定是不同的，有時需要額外的css來控制：

 

代碼如下	複製代碼
#myelement {      filter: alpha(opacity=40);  }

　　上面的css使用專用的filter屬性來設定ie6-8透明度。對於ie6和ie7需要注意：為了使得透明設定生效，元素必須是“有布局”。一個元素可以通過使用一些css屬性來使其被布局，有如width 和 position。關於微軟專有的haslayout屬性詳情，以及如何觸發它，歡迎參考111cn.net相關文檔。
　　另外一個設定ie8的css透明度的方法文法如下（注意注釋中指出的版本）：

 

 

首頁 1 2 3 末頁