来看看：CSS实例教程:PNG背景通明在网页计划中的使用

只看该作者 · 发表于 2015-1-15 22:53:59

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

目前我们的站就是div+CSS做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
破洛洛文章简介：PNG的背景通明在网页中使用对照普遍，但扫瞄器的兼容成绩一向很让人头疼，用的CSS滤镜再变通一下也能完成PNG背景半通明的兼容成绩，只不外不撑持背景的定位罢了，也就是说不撑持CSSSCRIPT。
PNG的背景通明在网页中使用对照普遍，但扫瞄器的兼容成绩一向很让人头疼，用的CSS滤镜再变通一下也能完成PNG背景半通明的兼容成绩，只不外不撑持背景的定位罢了，也就是说不撑持CSSSCRIPT。
1、CSS滤镜（两种办法）
　　一样平常能用CSS处置的就只管不要用JS了，其中的缘故原由，你懂的……
自己收拾了一下利用滤镜的办法处置IE6下的PNG半通明，但该办法也有范围性，不克不及利用背景定位，也就是不克不及利用CSSScript
办法1
CSS中心代码：

background-image:url(weather.png)!important;background-image:url(www.aqy106.com);filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src=weather.png);

复制代码

[/code]其他扫瞄器不必要处置，只必要独自针对IE6作处置也能够。
办法2CSS中心代码：

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=weather.png,sizingMethod=crop);

复制代码

[/code]申明：
办法1
当CSS中呈现两个一样的属性，不管是不是有!important，IE6只辨认最初一个属性。（IE6是辨认!important的，前面的background-image起搅扰感化。在Firefox下，!important被优先实行，filter滤镜不起感化。这个实在只必要处置PNG在IE6中不撑持半通明的成绩，其他扫瞄器都是撑持PNG的半通明的，以是不必要处置。该办法利用也有范围性，就是不撑持图片的定位，也就是不撑持CSSScript。
办法2
一样的也是使用滤镜举行处置，但办法上与办法一有所区分，独自针对IE6举行处置，使用“_”来针对IE6处置，其他扫瞄器对PNG的半通明是撑持的，以是不再必要处置了。必要注重的是，sizingMethod=crop须写上，否则会呈现一些莫名的边角的成绩，这个也是与办法一的办法有所区分的一点(偶然候不写也会一般，但保险起见，倡议写)。
2、DD_belatedPNG
　　DD_belatedPNG完善地办理了“iepngfix.htc”会呈现的没法平展，没法定位和所加超链接的点击地区没法利用等成绩！
　　具体文档见http://dillerdesign.com/experiment/DD_belatedPNG/。这里就不供应翻译了，哪位年夜年夜偶然间有精神就来个翻译文档吧。08岁暮这器材刚出来的时分国际就有人发过这个办法，但不晓得为何，没引发甚么“效应”，良多人仍是在用下面说的“更具范围性”的办法。
　　利用办法很复杂，起首下载挪用JS，然后在利用PNG的页面中援用代码，因为是针对IE6处置的，以是在核心加上IE6的前提正文，以便区分于其他扫瞄器。
1.
援用函数是DD_belatedPNG.fix(),括号里分离填写使用PNG图片通明的CSS选择器（可以使用ID选择器和类选择器）和使用范例（分为img和background两种）撑持多个选择器的利用，撑持hove的事务，和CSS的写法是一样的，最初两个是写使用的范例就能够了，最初完全的使用代码以下（注重必需是在全英文的形态下输出，良多人总是问我是甚么缘故原由不起感化，实际上是由于输出了中文的标点）：
　　单选择器和单使用范例：

DD_belatedPNG.fix(#box-one,img)
DD_belatedPNG.fix(.header,background)

　　更多选择器多使用范例：

DD_belatedPNG.fix(#box-one,.header,#footer,.box-twoa:hover,img,background);

　　别的，为办理IE6下背景图闪灼，能够界说下html的CSS
html{filter:expression(document.execCommand("BackgroundImageCache",false,true));}　　注：要注重下面选择器的标点要在英文的形态下，否则是没无效果的！
　　DD_belatedPNG下载(内含紧缩版和没紧缩的版本)：点击举行下载
　　IE6下的效果对照以下：