css实现png图片透明的方法

html-css020

css实现png图片透明的方法,第1张

实现透明的css方法通常有以下3种方式（以下是不透明度都为80%的写法）

css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8

css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)

IE专属滤镜 filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80)

这个需要用到JS 首先，打开Dreamweaver，新建一个JavaScript基本页，并复制以下代码替换掉里面的代码，完成后保存为png.js文件// Correctly handle PNG transparency in Win IE 5.5 or higher.

function correctPNG()

{

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

{

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 + "pxheight:" + 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)然后打开你要使PNG透明的页面，在<head>区内插入下面代码，注意一下地址就可以了<script type="text/javascript" src="png.js"></script>