当前位置:96看吧 > 技术文档 > 网页制作 > PNG图片在IE6中透明的方法

PNG图片在IE6中透明的方法

时间:2008/12/13
作者:佚名
来源:网络转载
查看:

1、图片的透明,用js也可以。
 

<!--[if lt IE 7]>
<style type=text/css>
div,img{behavior: url(iepngfix.htc)
</style>
<![endif]-->
附:iepngfix.htc
<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

 

<script type="text/javascript">
// IE5.5+ PNG Alpha Fix v1.0RC4
// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'images/bank.gif';


var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;

var bgImg = currentStyle.backgroundImage || style.backgroundImage;

if (tagName == 'IMG')
{
if ((/\.png$/i).test(src))
{
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   filt(src, 'scale');
   src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt();
}
else if (bgImg && bgImg != 'none')
{
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
{
   var s = RegExp.$1;
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   style.backgroundImage = 'none';
   filt(s, 'crop');
   // IE link fix.
   for (var n = 0; n < childNodes.length; n++)
    if (childNodes[n].style) childNodes[n].style.position = 'relative';
}
else filt();
}
}

doFix();</script>
</public:component>

2、背景的透明
 

background:url(images/login.png)!important;
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="image", src="images/login.png");
width:83px;height:30px; border:none;

 

3、按钮的透明

.wt{
background:url(images/login.png)!important;
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="image", src="images/login.png");
width:83px;height:30px; border:none;
}
<input alt="会员登录" class="wt" type="image" src="images/space.gif" />//这个的gif是没有任何图层的存透明图片。是以png为背景,然后用个透明图片做按钮,也就是做两层!另还有种方法,如下:
<!--[if lt IE 7]>
<style type=text/css>
div,img{behavior: url(iepngfix.htc)
</style>
<![endif]-->

 

<style type="text/css">
.wt{
background:none;
width:83px;height:30px; border:none;
}

</style>
<button class="wt"><img src="images/login.png" alt="" class="wt" /></button>

//在button标签里加图片,然后使这个图片透明就可以了,这个方法简单。

上一篇:复制网站内容时自动加上来源出处注释
下一篇:电话号码正则表达式
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门