當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

解决opacity属性在低版本IE浏览器下失效的方法

發布時間：2025/7/14 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了解决opacity属性在低版本IE浏览器下失效的方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

用法如下：

由于博客里面不能寫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>

轉載于:https://www.cnblogs.com/xyyt/p/3979265.html

總結

以上是生活随笔為你收集整理的解决opacity属性在低版本IE浏览器下失效的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。