网页上PNG透明图片的运用(ie6+滤镜)

PNG ( Portable Network Graphics ) 格式的无损压缩和半透明特性对增强网页效果减少网页体积有着重要的作用,但由于 IE6 不支持 PNG,所以一直未能得到广泛的应用。

虽然 IE7 已经支持 PNG,但目前 IE6 还是主流,怎么样让 IE6 也使用 PNG 呢?网上有相关的介绍,下面我也尝试做一下介绍,希望在表达上能更加通俗易懂…

IE5.5+ 的 AlphaImageLoader 滤镜为 PNG 提供良好的支持,虽然 IE5.0 无法支持,但毕竟是非常非常小的一部分,将来会更小,因此我们不考虑。

滤镜的语法:

    filter: progid: DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled, sizingMethod=sSize, src=sURL )

属性:

enabled: 可选项,布尔值(Boolean)。设置或检索滤镜是否激活。true | false

true: 默认值,滤镜激活。

false: 滤镜被禁止。

sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

crop: 剪切图片以适应对象尺寸。

image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

scale: 缩放图片以适应对象的尺寸边界。

src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

使用方法:

html>body #png{background:url(images/bg.png) no-repeat;}
 /* FF,Opera */ *html #png{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true,sizingMethod=scale,src="images/bg.png");background:none;} /* IE5.5+~IE7+ */

 

Firefox,Opera 支持 PNG ,使用“>”子选择器识别,而IE不识别该选择器(包括IE7)。

虽然 IE7 支持 PNG,但方便起见,还是采用滤镜,使用通配符“*”,该通配符只有 IE 才能识别

不过使用该滤镜,区域内的超链接按钮等将会失效,解决办法?使用“position”使它们浮在上

只有IE6有这个Bug,所以最新的写法这样就可以了

#png{background:url(../images/png32.png) no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true,sizingMethod=scale,src="images/png32.png");_background:none}

网页上PNG透明图片的运用(ie6+滤镜),布布扣,bubuko.com

时间: 2024-10-12 22:07:18

网页上PNG透明图片的运用(ie6+滤镜)的相关文章

获取网页上数据(图片、文字、视频)-b

Demo地址:http://download.csdn.net/detail/u012881779/8831835 获取网页上所有图片.获取所有html.获取网页title.获取网页内容文字... .h 文件  代码: //网页   //NSString *strPath = [NSString stringWithFormat:@"http://www.baidu.com/s?wd=%@&cl=3",theWord];   //视频   //NSString *strPath

安卓开发分享功能,分享到facebook网页上不显示图片的问题

最近公司要上分享功能,分享的地方包括微信,qq,facebook,功能完成后,发现分享到facebook的内容只有文字可以显示,图片不显示,其中图片存储是使用七牛的服务器:而分享到微信和qq都可以正常显示,经过不断的询问和查找,终于找到了疑似原因,我们怀疑是由于我们的服务器的地址是https协议的,而七牛图片的地址是http协议,由于协议不一致造成的图片无法加载,所以就开始验证吧! 首先,我们又搭建了一个http的服务器,数据还是之前的数据,结果可以在facebook上访问,这样基本就验证了我们

网页上常用的图片格式及使用场景

1.jpg:有损压缩格式 靠损失图片本身的质量来减小图片的体积, 适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 ) 2.gif:无损压缩格式 靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画, 适用于颜色数量较少的图像; 3.png:无损压缩格式 损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式, 适用于颜色数量较少的图像; 4.svg:可缩放矢量图形 svg 图像在放大或改变尺寸的情况下其图形质量不会有所损失,使用 XML 格式定

使用DD_belatedPNG让IE6支持PNG透明图片

众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上,具有其它图形格式所达不到的效果,IE6这一致命缺陷极大地限制了Web设计的创意发挥.虽然解决IE6的透明PNG的方法也很多,从使用IE特有的滤镜或是e­xpression,再到javascript+透明 GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat属性.而使用DD_belatedPNG.js可完美的解决IE6下PNG图片透明问题,并且支持

解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背

解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背 目录 解决代码 解决png图片在html中 解决png作为网页背景-css 1.解决PNG图片在IE6中背景不透明的CSS与JS代码   -   TOP JS代码  function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE&quo

关于网页上图片无缝滚动的一些思路

从现在的一些常见网站上,无缝滚动的例子用得非常普遍,可以说很常见,也比较实用,下面我们就来简单看看,具体的一些想法怎么实现的: 先简单来看一下原理: 首先我们看到网页上一组图片不停滚动,一次循环之后又从第一张开始,其实简单的思路是:我们设置两组图片,当第一组图片滚动到结尾时,对应的第一组图片又瞬间拉回到起始位置. 当图片向另外一个方向滚动时,当后面一组图片滚动到结尾时:也是瞬间拉回到开头. 下面我们简单来看一下代码: <!DOCTYPE html><html><head>

【css】ie6下使用css sprit 滤镜做透明图片

.service{ /*position:relative;*/ height:96% !important;overflow: hidden;} .pright{ height:40px; text-align:right; margin-top:30px; padding-right:50px; overflow:hidden; } .pright .btn_order{ background:url('../images/order_icon02.png') 0 0 no-repeat;

图片的base64编码实现以及网页上显示

生成.解析base64编码的图片 //图片转化成base64字符串 public static String GetImageStr(<span style="font-family: Arial, Helvetica, sans-serif;">String imgFile</span><span style="font-family: Arial, Helvetica, sans-serif;">) </span>

CSS实现背景透明而背景上的文字图片不透明

1.用图片则能兼容IE8和IE7 2.用颜色则不能兼容IE8和IE7,并且颜色层不能随着内容层自增长,只能设置一个固定高度 3.用颜色则颜色层不能包含内容层(图片和文字) 1 <!-- wrap最外层设置position:relative --> 2 <div class="wrap"> 3 <!-- bg为背景透明层 --> 4 <div class="bg"></div> 5 <!-- conte