设立ie6下png图片及背景透明的方法 2011-12-1 15:07阅读(1)
设置ie6下png图片及背景透明的方法 2011-12-1 15:07阅读(1)
设置ie6下png图片及背景透明的方法:
(1)微软滤镜法:filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="xxx.png")
缺点:不支持背景重复和背景位置
(2)js插件法:(推荐)支持css背景及img 注意:css背景可使用背景重复和背景位置
插件名称:DD_belatedPNG
下载地址:http://dillerdesign.com/experiment/DD_belatedPNG/
使用方法:
<script type="text/javascript" src="js/DD_belatedPNG.js"></script> //加载js插件路径
<script type="text/javascript">
DD_belatedPNG.fix(".box"); //将类为box的div背景图设置为透明
DD_belatedPNG.fix("img"); //将图像标签img设置为透明,也可以给图片设置类哦
</script>
还可以这样同时设置多个选择器透明图像:
<script>DD_belatedPNG.fix('img, div#ramas, div#border_footer, div#menu a');</script>
当然以上脚本放在条件注释中,即<!--[if ie 6]>...<![endif]-->
css部分:
<style type="text/css">
body {
background:#f00;}
.box {
width:700px;
height:200px;
border:1px solid #000;
background:url(images/qq.png) repeat 0px 0px;
}
</style>
HTML部分:
<div class="box"></div>
<img src="images/qq.png" alt="" />
设置ie6下png图片及背景透明的方法:
(1)微软滤镜法:filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="xxx.png")
缺点:不支持背景重复和背景位置
(2)js插件法:(推荐)支持css背景及img 注意:css背景可使用背景重复和背景位置
插件名称:DD_belatedPNG
下载地址:http://dillerdesign.com/experiment/DD_belatedPNG/
使用方法:
<script type="text/javascript" src="js/DD_belatedPNG.js"></script> //加载js插件路径
<script type="text/javascript">
DD_belatedPNG.fix(".box"); //将类为box的div背景图设置为透明
DD_belatedPNG.fix("img"); //将图像标签img设置为透明,也可以给图片设置类哦
</script>
还可以这样同时设置多个选择器透明图像:
<script>DD_belatedPNG.fix('img, div#ramas, div#border_footer, div#menu a');</script>
当然以上脚本放在条件注释中,即<!--[if ie 6]>...<![endif]-->
css部分:
<style type="text/css">
body {
background:#f00;}
.box {
width:700px;
height:200px;
border:1px solid #000;
background:url(images/qq.png) repeat 0px 0px;
}
</style>
HTML部分:
<div class="box"></div>
<img src="images/qq.png" alt="" />