PNG加透明opacity在Jquery動畫中出現黑邊

昨天在jquery中利用png透明圖片做一個動畫,要在ie8與ie7浏覽器中會發現有黑邊了,這黑邊邊框也很粗很難看,下面我來給大家提供一些解決小技巧。

這個問題 相信不少做JQ動畫的童鞋都遇到過。在頁面上實現一些動畫效果,用PNG24的圖片。經常會出現黑邊。

JQuery動畫的淡入淡出效果,用在PNG24的圖片上,在IE7、IE8下會出現黑邊框。

有些人覺得很奇怪,爲什麽?潘?E6正常,反而在IE7、8下卻有黑邊呢。

其實問題出在filter屬性上。IE6引用PNG24的圖片的方式是:

代碼如下
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img24.png');

所以避免了這個黑邊問題。

網上也有一些JS插件解決黑邊問題。但效果並不理想。經過多次測試,最終解決方案如下:

在使用PNG24的圖片外再嵌套一層DIV,用于設置透明度。同時IE下PNG24圖片不使用background來引用。而使用filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img24.png’);的方式。

相關代碼:
html

代碼如下
<div class="warp"> <div class="img24"></div> </div>

css

代碼如下

.warp {
filter:alpha(opacity=20);
}
//這裏是單獨對IE678設置的樣式,chrome等其他高級浏覽器還是照樣用background引用
.img24 {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img24.png');
width:100px;
height:100px;
}

更多相關文章
  • png透明在ie浏覽器中本來就支持不好了,所以我們需要想其它辦法來解決了,下面給各位整理了一個解決方法,希望對你有幫助.JQUERY fadeIn出現黑邊一般是在IE浏覽器下,由于使用了PNG的圖片,在PNG透明區域FADEIN的時候,IE會先用黑色渲染,解決方案如下:首先,由于之前大圖使用的是IM ...
  • promise是一個動畫事件了,我們可以利用它來創建很多各種動畫效果了,下面小編爲各位介紹jQuery 動畫 promise()方法使用例子jQuery 的 show.hide 方法大家都好熟悉的,也知道它可以接受一個回調函數,用于動畫完成後執行.比如:$('.js-sam').hide('slow ...
  • jquery.ui.dialog 1.81在ie8中出現滾動條失效解決方法var dialog = $("#divdialog").dialog({ autoopen:false ,width:350 ,height:160 ,buttons:{ "確認":f ...
  • 正當防衛3AMD驅動畫面出錯解決方法
    在正當防衛3的這一款遊戲裏面最近有玩家們碰見了AMD驅動畫面出錯不知道該怎麽樣去解決,那麽對于這個問題,今天小編就來給各位玩家們來說說解決的方法,下面來一起看看吧.給各位正當防衛3的玩家們來詳細的分享一下AMD驅動畫面出錯這一問解決的方法. 解決方法:這個是目前比較廣泛的問題,Avalanche工作
  • Windows 8系統無法自動更新,出現錯誤提示0x800解決辦法
    Windows 8系統無法自動更新,出現錯誤提示0x800怎麽辦了,下面我們一起來看看這個問題的解決辦法,希望文章能夠幫助到各位朋友.1.win+R快捷鍵然後在彈出運行框之後我們輸入“cmd"命令然後回車就可以運行了.2.然後在cmd命令下我們輸入:DISM.exe /Online /Cl ...
  • 電腦安裝Office 2016啓動Acrobat時出現“無法找到入口”錯誤
    電腦安裝Office 2016啓動Acrobat時出現"無法找到入口"錯誤時怎麽辦呢,安裝出錯是因爲沒有安裝Microsoft Visual C++ 編譯器了所以我們需要先安裝一個Microsoft Visual C++ 才可以了,具體如下.本文章來爲各位介紹關于Office 2 ...
  • 本文我們介紹一下IOS開發UI中的核心動畫基礎知識,本文主要內容是講CALayer動畫框架,圖層變換,專用圖層等.CALayer包含在QuartzCore框架中,這是一個跨平台的框架,既可以用在iOS中又可以用在Mac OS X中.在iOS中CALayer的設計主要是了爲了內容展示和動畫操作,CAL ...
  • CSS3 Animations創建返回頂部的平滑動畫
    返回頂部在css3未出來前我們都是使用jquery或原生的js來實現返回頂部了,現在有了css3我們可以輕松的實現返回頂部了,具體給各位介紹一下.一般在一個長的網頁中,我們都會有一個按鈕,讓用戶能夠快速的定位到網頁的不同地方,一般都是一個返回頂部的按鈕,這個功能我們都是使用的jQuery來完成,但是 ...
一周排行