解決opacity屬性在低版本IE瀏覽器下失效的方法

來源:互聯網
上載者:User

標籤:style   blog   http   color   io   使用   java   ar   strong   

以前,一直都以為ie9以下的版本不支援opacity屬性。所以就同時使用 opacity和ie獨特的filter蒙版。但是有些時候需要一些動態效果,就比如層的漸漸消失,隱藏,就需要使用動態變化的opacity,這種情況下,同時使用opacity和filter就顯的有點麻煩了。
其實,只使用opacity+jquery就完全解決這個問題。

用法如下:

<script type="text/javascript">    $(function () { $("#p1").css("opacity", 0.6); });</script>

由於部落格裡面不能寫js代碼,有興趣的朋友們可以把下面範例程式碼直接拷貝到txt檔案中,
然後把檔案尾碼名改為.html就好,然後直接運行這個檔案就可以在瀏覽器中看效果了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><title>CSS opacity 屬性樣本</title>             <style type="text/css" media="all">#p2{opacity:0.4;}p{width:200px;height:200px;background-color:green;float:left;}</style><script type="text/javascript">    $(function () { $("#p1").css("opacity", 0.6); });</script></head><body><p id="p1">opacity:0.6;這個透明度通過jquery添加,不存在低版本IE瀏覽器不相容的現象</p><p id="p2">opacity:0.4;這個透明度直接使用樣式設定,低版本的IE瀏覽器會沒有透明效果</p></body></html>

 

解決opacity屬性在低版本IE瀏覽器下失效的方法

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.