欧日韩高清av在线播放,老熟妇牲交中文

相關(guān)推薦

IE6png透明三種解決方法

ecshop模板堂(http://emrowgh.com)

FF和IE7已經(jīng)直接支持透明的png圖了,下面這個(gè)主要是解決IE6下透明PNG圖片有灰底的

第 1 種方法:定義一個(gè)樣式,給某個(gè)div應(yīng)用這個(gè)樣式后，div的透明png背景圖片自動(dòng)透明了。（注意兩處圖片的路徑寫(xiě)法不一樣，本例中，icon_home.png圖片與html文件在相同目錄）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://emrowgh.com"> <html xmlns="http://emrowgh.com">

<head>

<!--

.qq {

height: 90px;

width: 90px;

background-image: url(icon_home.png)!important;/* FF IE7 */ background-repeat: no-repeat;

filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */

_ background-image: none; /* IE6 */

}

-->

</style>

</head>

<body>

</body>

</html>

第 2 種方法: 給img定義樣式，頁(yè)面上所有透明png即自動(dòng)透明了。（這方法只對(duì)直接插入的圖片有效，對(duì)背景圖無(wú)效）注意，要準(zhǔn)備一個(gè)透明的小圖片transparent.gif,大小不限。必須放在和html相同的目錄

請(qǐng)勿大量使用，否則會(huì)導(dǎo)致頁(yè)面打開(kāi)很慢!!!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://emrowgh.com">

<head>

.mypng img {

azimuth: expression(

this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

this.src = "transparent.gif"):(this.origBg = this.origBg?

this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

this.runtimeStyle.filter

"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"

this.origBg + "', sizingMethod='crop')",

this.runtimeStyle.backgroundImage = "none")),this.pngSet=true); }

</style>

</head>

《IE6png透明三種解決方法》全文內(nèi)容當(dāng)前網(wǎng)頁(yè)未完全顯示，剩余內(nèi)容請(qǐng)?jiān)L問(wèn)下一頁(yè)查看。

<body>

換成你的png圖片

</div>

</body>

</html>

第 3 種方法:用JS實(shí)現(xiàn),加上一段js代碼后,所有插入的透明png自動(dòng)透明了.（注意，這方法也是只對(duì)直接插入的圖片有效，對(duì)背景圖無(wú)效）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://emrowgh.com">

<head>

<title>無(wú)標(biāo)題文檔</title> = +

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.

{

var arVersion = navigator.appVersion.split("MSIE")

var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))

{

for(var j=0; j<document.images.length; j++)

{

var img = document.images[j]

var imgName = img.src.toUpperCase()

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

{

var imgID = (img.id) ? "id='" + img.id + "' " : ""

var imgClass = (img.className) ? "class='" + img.className + "' " : ""

var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle

if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

+ "(src=\'"

sizingMethod='scale');\"></span>" + img.src + "\',

img.outerHTML = strNewHTML

《IE6png透明三種解決方法》全文內(nèi)容當(dāng)前網(wǎng)頁(yè)未完全顯示，剩余內(nèi)容請(qǐng)?jiān)L問(wèn)下一頁(yè)查看。

j = j-1

}

window.attachEvent("onload", correctPNG);

</script>

<!--

body {

background-color: #9999CC;

}

-->

</style></head>

<body>

把圖片換成你自己的圖片

<img src="img/icon_face_03.png" width="30" height="30" /><!--把圖片換

成你自己的圖片 -->

</html>

【ECSHOP模板堂出品】

解決ie6png透明的方法小結(jié)2017-03-22 13:45 | #2樓

png格式比起gif來(lái)表現(xiàn)色彩更豐富，特別是表現(xiàn)漸變以及背景透明的漸變要比gif格式出色很多，目前，最新的瀏覽器基本上都支持png格式。

（1）使用ie特有的expression

.pngimg { background:url(image.png); _background:url(image.gif);}

原理：上文的_號(hào)，目前ie7,8以及firefox瀏覽器等都不支持此css語(yǔ)法，只有ie6識(shí)別。因此，其他瀏覽器會(huì)調(diào)用png，而ie6剛調(diào)用gif。

（2）濾鏡filter解決ie6下背景灰

style="filter: progid:dximagetransform.microsoft.alphaimageloader(src=images/fl.png')"

【

microsoft.alphaimageloader是ie濾鏡的一種，其主要作用就是對(duì)圖片進(jìn)行透明處理。其屬性有：

enabled : 可選項(xiàng)。布爾值(boolean)。設(shè)置或檢索濾鏡是否激活。true | false true : 默認(rèn)值。濾鏡激活。false : 濾鏡被禁止。

sizingmethod : 可選項(xiàng)。字符串(string)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。 crop : 剪切圖片以適應(yīng)對(duì)象尺寸。

（image : 默認(rèn)值。增大或減小對(duì)象的尺寸邊界以適應(yīng)圖片的尺寸。scale : 縮放圖片以適應(yīng)對(duì)象的尺寸邊界。src : 必選項(xiàng)。字符串(string)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用）

src : 可讀寫(xiě)。

缺陷：ie6下背景無(wú)法平鋪，這個(gè)問(wèn)題很?chē)?yán)重。同時(shí)在性能上也有小問(wèn)題，頁(yè)面中次數(shù)不是很多的時(shí)候該辦法還是可行的。

alphaimageloader濾鏡會(huì)導(dǎo)致該區(qū)域的鏈接和按鈕無(wú)效，解決的辦法是為鏈接或按鈕添加：position: relative;這樣條代碼，使其相對(duì)浮動(dòng)。alphaimageloader無(wú)法設(shè)置背景的重復(fù)，所以對(duì)圖片的切圖精度會(huì)有很高的精確度要求。

】

【

實(shí)例：

.png{

_background: url(http://emrowgh.com) no-repeat !important;

filter: progid:dximagetransform.microsoft.alphaimageloader(enabled=true, sizingmethod=noscale, src="http://emrowgh.com");

background:none;

width:118px;height:133px;

}

.png div{position:relative;}

html代碼：

<div>

css 背景png透明及鏈接失效問(wèn)題解決

</div>

】

（3）利用js解決html中的img(插入在網(wǎng)頁(yè)中的png圖像)png背景灰問(wèn)題

原理：原理同上，只是將img標(biāo)簽用<span>標(biāo)簽替換掉，并且通過(guò)濾鏡設(shè)置該<span>標(biāo)簽的background。它會(huì)將所有插入的png都如此處理。注意的是這方法也是只對(duì)直接插入的圖片有效，對(duì)背景圖無(wú)效。

修復(fù)ie下圖片不能透明顯示的問(wèn)題：

<!--[if ie 6]>

function correctpng()

{

for(var i=0; i<document.images.length; i++)

{

var img = document.images[i];

var imgname = img.src.touppercase();

if (imgname.substring(imgname.length-3, imgname.length) == "png")

{

var imgid = (img.id) ? "id='" + img.id + "' " : "";

var imgclass = (img.classname) ? "class='" + img.classname + "' " : "";

var imgtitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";

var imgstyle = "display:inline-block;" + img.style.csstext;

if (img.align == "left") imgstyle = "float:left;" + imgstyle;

if (img.align == "right") imgstyle = "float:right;" + imgstyle;

if (img.parentelement.href) imgstyle = "cursor:hand;" + imgstyle;

var strnewhtml = "<span "+ imgid + imgclass + imgtitle + "style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgstyle + ";"

+ "filter:progid:dximagetransform.microsoft.alphaimageloader" + "(src='" + img.src + "', sizingmethod='scale');\"></span>";

img.outerhtml = strnewhtml;

i = i-1;

}

window.attachevent("onload", correctpng);

</script>

<![endif]-->

（4）調(diào)用iepngfix.htc解決ie6png背景灰及拉伸問(wèn)題

此方法來(lái)自：http://emrowgh.com 此方法基于winodws平臺(tái)，在linux下不支持htc,沒(méi)有驗(yàn)證過(guò)，但有網(wǎng)友發(fā)文證實(shí)。

以下片段添加至css文件

<div class="pngimg">png背景圖片</div> <img src="png圖片" class="pngimg" alt="">

詳細(xì)的應(yīng)用方法這里就不介紹啦。

在必須使用png的情況下，這種方法應(yīng)該是比較優(yōu)秀的，雖然不能完美的解決ie6的平鋪，但是至少是實(shí)現(xiàn)了拉伸，使得很多情況下可以代替平鋪來(lái)使用。當(dāng)然效率的問(wèn)題任然是存在

（5）讓“塊”透明的方法

.div { filter: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;}

測(cè)試ie6,ie7,ie8,ff2,ff3均通過(guò)。提示：ie6,ie7需設(shè)置一個(gè)寬度(100%也行)，否則看不到效果。

（6）dd_belatedpng,解決ie6不支持png絕佳方案

整個(gè)互聯(lián)網(wǎng)上解決這個(gè)ie6的透明png的方案也是多不勝數(shù),從使用ie特有的濾鏡或是expression,再到j(luò)avascript+透明gif替代.但是這些方法都有一個(gè)缺點(diǎn),就是不支持css中backgrond-position與 background-repeat.

而我今天介紹dd_belatedpng,只需要一個(gè)理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.同時(shí)dd_belatedpng還支持a:hover屬性,以及<img>.

看demo: http://emrowgh.com

原理

這個(gè)js插件使用了微軟的vml語(yǔ)言進(jìn)行繪制,而其他多數(shù)解決png問(wèn)題的js插件用的是alphaimageloader濾鏡.

使用方法

/files/aking/解決ie6透明png.rar

1.在這里下載dd_belatedpng.js文件.

http://emrowgh.com

2.在網(wǎng)頁(yè)中引用,如下:

<!--[if ie 6]>

3.有2種調(diào)用函數(shù),一種是dd_belatedpng.fix(),如上代碼.另一種是fix(),這中方法需要在函數(shù)內(nèi)指出css選擇器名.

使用a:hover請(qǐng)留意

5-25 更新:如果你也像jutoy同學(xué)一樣想要用透明png作為a:hover時(shí)的背景圖片,那么你需要留意你的代碼,需要以”a:hover”來(lái)作為選擇器. 否則可能會(huì)導(dǎo)致無(wú)法成功.同時(shí)我也更新了demo,請(qǐng)需要的更新查看.接著我們看看正確的代碼:

<!--[if ie 6]>

<![endif]-->

（7）通過(guò) javascript 和 css 濾鏡解決 ie 整站 png 背景透明問(wèn)題 <script type="text/javascript" language="javascript">

function enablepngimages()

{ var imgarr = document.getelementsbytagname("img");

for(i=0; i<imgarr.length; i++){

if(imgarr[i].src.tolowercase().lastindexof(".png") != -1)

{

imgarr[i].style.filter = "progid:dximagetransform.microsoft.alphaimageloader(src='" + imgarr[i].src + "', sizingmethod='auto')";

imgarr[i].src = "spacer.gif";

}

if(imgarr[i].currentstyle.backgroundimage.lastindexof(".png") != -1)