菜单

IE浏览器PNG图片透明效果代码,JS解决ie6下png透明的方法实例

2019年8月2日 - 前端排行

复制代码 代码如下:

首先看我们的<img>标签代码:
<img src=”Example.png” border=”0″ alt=”放大镜” />
我们将利用IE中特有的特效来满足这个要求,这就是AlphaImageLoader Filter
()

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>解决ie6下png透明方法之JS法-</title>
<style type=”text/css”>
 .a{background: #FFFF99 ;  background-image: url(bg.jpg);
height:800px;padding: 50px;  }
 .b{ float: left;  background: url(tra.png) no-repeat 0 0; width:240px;
height:307px; margin-right:20px;}
</style>
<!–[if IE 6]> //只有IE6才调用
<script src=”//www.jb51.net/js/iepng.js”
type=”text/javascript”></script> //此处调用透明的JS
<script type=”text/javascript”>
   EvPNG.fix(‘div, ul, img, li, input’); 
//EvPNG.fix(‘包含透明PNG图片的标签’); 多个标签之间用英文逗号隔开。
</script>
<![endif]–>
</head>
<body>
<div class=”a”>
    <div class=”b”>

如何做?
将下面代码保存为correctPNG.js:

      <p>脚本之家</p>
      <p><a
href=”//www.jb51.net”>www.jb51.net</a></p>
      <p>上边的链接可以点开哟</p>
   </div><!–背景调用–>

复制代码 代码如下:

    <img src=”tra.png” width=”240″  height=”307″ alt=””
/><!–页面插入图片–>
</div>
</body>
</html>

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

您可能感兴趣的文章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图