网页上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="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+滤镜)的更多相关文章
- 网页上PNG透明图片的ie6bug
只有IE6有这个Bug,所以的写法这样就可以了 #png{background:url(../images/png32.png) no-repeat;_filter:progid:DXImageTra ...
- 获取网页上数据(图片、文字、视频)-b
Demo地址:http://download.csdn.net/detail/u012881779/8831835 获取网页上所有图片.获取所有html.获取网页title.获取网页内容文字... . ...
- HTML在网页上不能显示图片问题
我遇到的问题是写了一个HTML程序,结果在网页上面不能显示,原因是图片路径放置错了. 修改前代码: <!DOCTYPE html> <html> <head> &l ...
- mac上做透明图片, png, alpha
现在OS X中自带的[预览]功能十分强大,我们甚至可以通过预览来直接制作一些透明效果的PNG图片,当做图片素材(例如图标)使用.这里要用到的是[预览]中的“即时Alpha”工具. -首先我们要使用预览 ...
- 安卓开发分享功能,分享到facebook网页上不显示图片的问题
最近公司要上分享功能,分享的地方包括微信,qq,facebook,功能完成后,发现分享到facebook的内容只有文字可以显示,图片不显示,其中图片存储是使用七牛的服务器:而分享到微信和qq都可以正常 ...
- 在WinCE上播放声音、设置透明图片、系统音量 C#
记录一下用到的C#在WinCE平台上的相关技巧备查 1.C#在WinCE上实现透明图片 1 2 3 4 5 6 7 8 9 using System.Drawing.Imaging; pu ...
- 让ie6对png透明图片支持起来
[声明:此文仅是对低版本ie使用透明图片的一个研究,当时出于工作要求,所以花费了一番心思在兼容旧版本ie上,现在对ie8都是做降级处理了.不培养用户坏习惯.引导用户跟随潮流体验新技术应是我们前端开发者 ...
- 使用DD_belatedPNG让IE6支持PNG透明图片
使用DD_belatedPNG让IE6支持PNG透明图片 众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上,具有其它图形格式所达不到的效果,IE6这一致命缺陷极大地限制了We ...
- 网页中PNG透明背景图片的完美应用
PNG 图片在网站设计中是不可或缺的部分,最大的特点应该在于 PNG 可以无损压缩,而且还可以设置透明,对于增强网站的图片色彩效果有重要的作用. 但为什么 PNG 图片却没有 GIF 和 JPG 图片 ...
随机推荐
- SPSS实例教程:多重线性回归,你用对了么
SPSS实例教程:多重线性回归,你用对了么 在实际的医学研究中,一个生理指标或疾病指标往往受到多种因素的共同作用和影响,当研究的因变量为连续变量时,我们通常在统计分析过程中引入多重线性回归模型,来分析 ...
- Python学习day36-并发编程(2)
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- Django 连接MySQL的驱动设置
对于在Django 中连接MySQL 的驱动,有以下三种: 1) mysqlclient 2) mysql-connector-python 3) pymysql (建议:这个包已经有一年未升级了,本 ...
- BaseController 的使用
为了提现代码的高可用性,我们可以常见的把dao层进行抽取,service ,但是很少看见有controller的抽取,其实dao层也是可以被抽取的. 首先我们定义一个BaseController接口 ...
- JSOI 2016 扭动的字符串
JSOI 2016 扭动的字符串 题面描述 给出两个长度为\(n\)的字符串\(A,B\) \(S(i,j,k)\)表示把\(A\)中的\([i,j]\)和\(B\)中的\([j,k]\)拼接起来的字 ...
- 微信小程序之组件的集合(六)
这个将是最后一篇关于小程序的记录了,课程接近尾声,最后一个是关于用户的page页面,看看这个页面中有哪些值得学习的地方! 一.page中my开发 这个主要是展示用户喜欢的杂志,以及用户的信息,需要创建 ...
- css的书写位置+元素分类
1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...
- Python_day01——字符串
https://www.cnblogs.com/A-FM/p/5691468.html def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 # 获 ...
- Android根据联系人姓名首字符顺序读取通讯录
Android根据联系人姓名首字符顺序读取通讯录 版权声明:本文为Zhang Phil原创文章,欢迎转载!转载请注明出处:http://blog.csdn.net/zhangphil 本文给出了A ...
- 网络编程-基础篇03(I/O模型)
好文传播,在此插个眼: 一文读懂高性能网络编程中的I/O模型