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="data: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="data:images/png32.png");_background:none}

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

  1. 网页上PNG透明图片的ie6bug

    只有IE6有这个Bug,所以的写法这样就可以了 #png{background:url(../images/png32.png) no-repeat;_filter:progid:DXImageTra ...

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

    Demo地址:http://download.csdn.net/detail/u012881779/8831835 获取网页上所有图片.获取所有html.获取网页title.获取网页内容文字... . ...

  3. HTML在网页上不能显示图片问题

    我遇到的问题是写了一个HTML程序,结果在网页上面不能显示,原因是图片路径放置错了. 修改前代码: <!DOCTYPE html> <html> <head> &l ...

  4. mac上做透明图片, png, alpha

    现在OS X中自带的[预览]功能十分强大,我们甚至可以通过预览来直接制作一些透明效果的PNG图片,当做图片素材(例如图标)使用.这里要用到的是[预览]中的“即时Alpha”工具. -首先我们要使用预览 ...

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

    最近公司要上分享功能,分享的地方包括微信,qq,facebook,功能完成后,发现分享到facebook的内容只有文字可以显示,图片不显示,其中图片存储是使用七牛的服务器:而分享到微信和qq都可以正常 ...

  6. 在WinCE上播放声音、设置透明图片、系统音量 C#

    记录一下用到的C#在WinCE平台上的相关技巧备查 1.C#在WinCE上实现透明图片 1 2 3 4 5 6 7 8 9 using System.Drawing.Imaging;       pu ...

  7. 让ie6对png透明图片支持起来

    [声明:此文仅是对低版本ie使用透明图片的一个研究,当时出于工作要求,所以花费了一番心思在兼容旧版本ie上,现在对ie8都是做降级处理了.不培养用户坏习惯.引导用户跟随潮流体验新技术应是我们前端开发者 ...

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

    使用DD_belatedPNG让IE6支持PNG透明图片 众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上,具有其它图形格式所达不到的效果,IE6这一致命缺陷极大地限制了We ...

  9. 网页中PNG透明背景图片的完美应用

    PNG 图片在网站设计中是不可或缺的部分,最大的特点应该在于 PNG 可以无损压缩,而且还可以设置透明,对于增强网站的图片色彩效果有重要的作用. 但为什么 PNG 图片却没有 GIF 和 JPG 图片 ...

随机推荐

  1. ThinkPHP实现了ActiveRecords模式的ORM模型

    ThinkPHP实现了ActiveRecords模式的ORM模型,采用了非标准的ORM模型:表映射到类,记录映射到对象.最大的特点就是使用方便和便于理解(因为采用了对象化),提供了开发的最佳体验,从而 ...

  2. 洛谷 P1242 新汉诺塔

    原题链接 题目描述 设有n个大小不等的中空圆盘,按从小到大的顺序从1到n编号.将这n个圆盘任意的迭套在三根立柱上,立柱的编号分别为A.B.C,这个状态称为初始状态. 现在要求找到一种步数最少的移动方案 ...

  3. Hadoop 初体验

    Hadoop 是一个基于谷歌发表的几篇论文而开发的一个分布式系统基础架构,用户可在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储.Hadoop现在已经成了大数据的代 ...

  4. shell 的基本理解

    shell 事先通过一个变量设定好了多个路径,当用户输入命令时,shell会自动到这些路径(由左向右)以此查找 与命令名称相同的可执行文件 hash 用来保存以前曾经执行过的命令,以哈希表的方式保存, ...

  5. 02_Spring Bean的装配模式_基于XML配置方式

    一.三种实例化Bean的方式 1.使用类构造器实例化(默认无参数) <bean id="bean1" class="com.demo1.Bean1"> ...

  6. 使用scrapy框架来进行抓取的原因

    在python爬虫中:使用requests + selenium就可以解决将近90%的爬虫需求,那么scrapy就是解决剩下10%的吗? 这个显然不是这样的,scrapy框架是为了让我们的爬虫更强大. ...

  7. mysql TIMESTAMP 不能为NULL

    一般建表时候,创建时间用datetime,更新时间用timestamp.这是非常重要的. 我测试了一下,如果你的表中有两个timestamp字段,只要你更新任何非timestamp字段的值,则第一个t ...

  8. Elasticsearch & Kibana with Shield

    Elasticsearch & Kibana with Shield   官方网站: https://www.elastic.co/guide/en/kibana/current/produc ...

  9. 2018-11-20-UWP-开发中,需要知道的1000个问题

    title author date CreateTime categories UWP 开发中,需要知道的1000个问题 lindexi 2018-11-20 09:28:53 +0800 2018- ...

  10. LeetCode387First Unique Character in a String字符串中第一个唯一字符

    给定一个字符串,找到它的第一个不重复的字符,并返回它的索引.如果不存在,则返回 -1. 案例: s = "leetcode" 返回 0. s = "loveleetcod ...