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來完成,但是 ...
一周排行
  • 生成html的原理非常的簡單就是定義好標簽之後再利用相關函數的進行替換就可以了,具體步驟如下圖所示.1.簡單的生成htm頁面代碼沒有分頁 代碼如下 using system; using system.data; u ...
  • javascript教程 省市二級聯動菜單<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
  • PHP生成唯一訂單號其實是非常的簡單了我們隨便就可以整理多種生成方式了,這裏小編整理了6種方式供各位參考.做商城類專案經常需要生成唯一訂單號,下面來個彙總!方法一:return date('Ymd') . str_p ...
  • ps非主流傷感個性簽名(1/5)
    文章來告訴你ps非主流傷感個性簽名哦,如果你正在想自己制作出漂亮的個性簽名的話就進來看看吧
  • linux中文件權限與ACL的深入分析
    linux中對于文件及目錄的權限設置是非常的一個嚴了,我們如果權限沒有設置好那麽你可能無權 ...
  • 下面我把解壓與壓縮文件分成了個程序代碼,大家可以把它整理成一個類文件,這樣我們就可以直接調用方法了,下面是原生態的代碼沒處理,有能力的朋友可發整理一下.解壓類 代碼如下 using System;using Syst
  • ff浏覽器淘寶網打不開“此連接不受信任”解決辦法
    淘寶網我相信各們國人都知道吧,不知道淘寶網站的小編覺得你應該是60年後了,雖然淘寶是大網站
  • 如果我把這個問題發出去可能會有人說svn權限控制是到文件夾級別的,不是到文件級別,因此你需要首先將文件夾結構設置好,每個人要看的文件分別放在不同的文件夾中,比如根目錄是aaa,下面每個人對應的目錄分別是a1.a2.a ...
  • windows伺服器下IIS7 安裝URL RewriteURL重寫模塊
    URL重寫在iis中是需要下載URL Rewrite模塊之後再進行安裝配置才可以了,並且 ...
  • word文檔不適合放到網頁上了,如果我們要放到網頁中去是需要一個個複制了,如果你還在複制就out了,下文小編來爲各位整理一篇php實現word轉html文檔的例子,希望文章對各位有幫助.要想完美解決,office轉p