天天看點

css設定圖檔的透明度

 在圖檔的屬性中加上{filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}

opacity是最重要的,因為它是CSS透明的标準屬性,取值範圍在0-1之間,目前支援的浏覽器有:

Firefox、Chrome、Opera、Safari。(也就是說,除了IE,它支援所有主流浏覽器);

filter:alpha(opacity=50);是專門給IE設定的屬性,取值的範圍在0-100之間;

-moz-opacity是為了相容一些老版本的Mozilla浏覽器,取值範圍在0-1之間;

-khtml-opacity是為了相容一些老版本的Safari浏覽器,取值範圍在0-1之間。

看别人的代碼,通常情況下會剩去後兩個屬性,這是因為Mozilla和Safari浏覽器都支援自動更新

,用這些浏覽器的人一般用的也是較新的版本,是以後兩個為了相容較老的浏覽器的屬性不用也

罷。

以上就是CSS透明屬性的基本用法,然而用到透明屬性的地方,一般都是用在層疊層次較多的下層

來用,這就需要考慮CSS的繼承問題:因為下層透明的元素,上層也會跟着透明。目前我還沒有很

好的方法解決這個繼承問題(有更好解決辦法的歡迎留言告之),是以遇到這種情況,我通常是

把HTML部分要透明的部分獨立分離開,然後采用定位的方法再把它定位到該放置的位置。