了解IE中filter属性的应用！

在设置不透明属性时，经常用opacity来增加层次感或者增加用户体验，但这个属性是css3属性，对于低级浏览器的兼容性来说就达不到预期的效果。

一般而言，我们都尽可能少用一些浏览私有属性-webkit,-moz,-ms,-o，但这也仅仅解决了市面上很多浏览器的问题，面对IE，特别是IE9-版本的，也是显得有气无力。

如果要使得市面上的浏览器达到统一的近类似效果，那么是非常有必要写上IE私有属性，触发IE hasLayout 特性，比如这样：

.opacity{
	opacity:0.5;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*IE6~IE8*/
}

filter是CSS1的属性，但是因为老版本的IE4.0~IE9对filter的支持性不高，对浏览器的支持也不稳定，因此这个属性只能当做实验性技术来观察。

一.filter 界面滤镜

在IE中 filter 分为静态滤镜(Visual Filters)和过渡转场(Transitions Reference)。静态滤镜的效果可以设置元素的不透明度、渐变、模糊、对比度、明度等，而过度转场则注重的ie的动画效果。

使用ie filter属性时，必须要加前缀,如下：

.test{
	filter:progid:DXImageTransform.Microsoft.    /*.后面都是紧跟着各种滤镜和转场函数*/
}

/*如：模糊滤镜*/
.blur{
	filter:progid:DXImageTransform.Microsoft.Blur()    /*.函数的开头第一个字母必须大写，括号()里面的滤镜的各种值*/
}


1.AlphaImageLoader，这个属性是主要是针对png透明图片进行不透明度的处理，在IE6的png透明图片其实是不透明的，显示会灰色背景。




语法：




filter:progid:DXImageTransform.Microsoft.AlphaImageLoader()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘ , sizingMethod=‘‘ , src=‘mini.jpg‘)





其值包括2个可选值，一个必选值。








属性
特性
描述




enabled
Enabled


可选值，Boolean布尔值，默认值为ture，启用过滤器；false为不启用过滤器。所有的filter都有该属性值，下面不一一多说。






sizingMethod
sizingMethod


可选值，设置或检索的方式来显示一个图像在对象边界显示方式。有三个值：crop裁剪图像以适应对象的尺寸；image，默认值，扩大或减少对象的边界,以适应图像的尺寸；scale，伸展或收缩图像填充对象的边界；






src
src


必须值，引入图片。










不妨用你的手中的IE6~8来预览一下官方demo→AlphaImageLoader




2.Gradient，渐变滤镜。




语法：




filter:progid:DXImageTransform.Microsoft.Gradient()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Gradient(enabled=‘ture‘,GradientType=‘1‘,StartColorStr=‘#00000000‘,EndColorStr=‘#FFFF3300‘)









属性
特性
描述




enabled
Enabled


可选值，Boolean布尔值，默认值为ture，启用过滤器；false为不启用过滤器。






StartColorStr
StartColor


设置或者检索开始不透明度的梯度值，整数型Integer，指定一个整数型值，值的变化从0 (transparent[透明]) to 4294967295 ([白色不透明]).






 
StartColorStr


设置或者检索开始的颜色值，string类型字符串，值从#FF000000 到 #FFFFFFFF，默认值为：#FF000000，比如一个值为：#AARRGGBB ，那么AA代表透明度alpha，RR表示红色16进制值，GG表示绿色16进制值，BB表示黑色16进制值。






 
EndColor


设置或者检索结束不透明度的梯度值，同上，很少用。






 
EndColorStr


设置或者检索结束的颜色值，同上






 
GradientType


设置渐变的方向。有两个值，1代表水平方向，0代表垂直方向渐变。










可以使用IE6~8来预览一下官方demo→Gradient Filter


结合上表，注意下面的style属性的时候其实就会发现，StartColorStr中的值跟我们平常的用到的#ffffff是不一样的，如图




二、filter静态滤镜




1.Alpha，调整对象内容的不透明度。




语法：




filter:progid:DXImageTransform.Microsoft.Alpha()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Alpha(enabled=‘ture‘,GradientType=‘1‘,StartColorStr=‘#00000000‘,EndColorStr=‘#FFFF3300‘)





Style，设置或者调整不透明度的风格。0代表默认值，1代表线性不透明，2代表径向渐变，3代表矩形渐变




Opacity，设置或调整不透明度值。0~100值，其中0默认值表示全透明，100为全不透明




FinishOpacity，设置或调整最后不透明度值。0~100值，其中0默认值表示全透明，100为全不透明




StartX，设置或调整水平不透明最开始位置，默认值为0，即从对象最左边开始。




FinishX，设置或调整水平不透明度结束位置，默认值为0




StartY，设置或调整垂直方向不透明度开始位置，默认值为0




FinishY，设置或调整垂直不透明度结束位置，默认值为0




不妨用你的手中的IE6~8来预览一下官方demo→Alpha Filter




2.BasicImage，调整对象的内容的颜色处理、图像旋转或不透明度。




filter:progid:DXImageTransform.Microsoft.BasicImage()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.BasicImage(Grayscale=‘x‘, Xray=‘x‘, Mirror=‘x‘, Invert=‘x‘, Opcity=‘x‘, Rotation=‘x‘)





GrayScale ，设置或调整对象的灰度值。




Invert ，设置或调整对象的反相。




Opacity ，设置或调整对象的不透明度。




Mask ，设置或调整对象的的RGB是否为MashColor值，0默认值，显示正常RGB值，1表示改变内容为MashColor（不常用）




Mirror ，设置或调整对象镜像。0正常显示，1内容对象将翻过来。




Rotation ，设置或调整对象旋转，0正常显示，1代表旋转90°，2代表旋转180°，3代表旋转270°




XRay ，设置或调整对象的X射线，布尔值，0正常显示，1代表X射线，有点像我们去医院拍X光一样的效果。




不妨用你的手中的IE6~8来预览一下官方demo→BasicImage Filter




3.Blur，设置对象的模糊值。




filter:progid:DXImageTransform.Microsoft.Blur()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=‘x‘, MakeShadow=‘x‘, ShadowOpacity=‘x‘)





PixelRadius，设置对象的模糊半径，1~100数值。




MakeShadow，设置对象是否投影，布尔值，true和false




ShadowOpacity，设置对象投影不透明度，0.0~1.0，假如MakeShadow为false那么该值无效。




不妨用你的手中的IE6~8来预览一下官方demo→Blur Filter




4.Chroma ，设置对象的色彩透明度




filter:progid:DXImageTransform.Microsoft.Chroma()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Chroma(Color=‘x‘)





Color，设置颜色值。




不妨用你的手中的IE6~8来预览一下官方demo→Chroma Filter




5.Compositor ，设置新对象内容的合成颜色，这个翻译有点拗口，大概的意思就是：2个对象，要显示哪个或者隐藏哪个，或者显示他们对比之后的新对象。




filter:progid:DXImageTransform.Microsoft.Compositor()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Compositor(function=‘‘)





其中function值有18个值，很多很多。也不一一说了，有兴趣的的前往这里看demo→Compositor Filter




6.DropShadow ，设置对象的投影效果。




filter:progid:DXImageTransform.Microsoft.DropShadow()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=‘x‘, OffY=‘x‘, Color=‘x‘, Positive=‘x‘)





OffX，设置投影的X位移，单位数值，默认值为5




OffY，设置投影的Y位移，单位数值，默认值为5




Color，设置投影的颜色值




Positive，设置投影的透明或者非透明。






不妨用你的手中的IE6~8来预览一下官方demo→Blur Filter




7.Emboss ，设置对象的浮雕效果。




filter:progid:DXImageTransform.Microsoft.Emboss()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Emboss(Bias=‘‘)





一般来说Bias属性不需要设置，可以忽略，官方demo→Emboss Filter




8.Engrave ，设置对象的雕刻效果。




filter:progid:DXImageTransform.Microsoft.Engrave()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Engrave(Bias=‘‘)





一般来说Bias属性不需要设置，可以忽略，官方demo→Engrave Filter




9.Glow ，设置对象的光晕效果。




filter:progid:DXImageTransform.Microsoft.Glow()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Glow(color=‘‘, Strength=‘‘)





color，设置光晕颜色。




Strength，设置光晕的宽度，数值单位




官方demo→Glow Filter




10.Light ，设置对象的亮度




filter:progid:DXImageTransform.Microsoft.Light()





addAmbient，加入对象环境光




addCone ，加入锥形光源




addPoint 加入点光源




changeColor ，改变亮度颜色




changeStrength，改变亮度长度




clear，清除亮度




moveLight，移动光源焦点。




官方demo→Light Filter




11.ICMFilter ，设置对象颜色内容改变，使其显示像打印设备的颜色。




官方无demo，IE9时，这个滤镜仅仅应用于屏幕内容显示效果上，当内容是打印时，将不应用。




12.MaskFilter ，设置对象内容透明或者非透明颜色。




filter:progid:DXImageTransform.Microsoft.MaskFilter()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.MaskFilter(Color=‘‘)





13.Matrix，调整大小、旋转或翻转使用矩阵的内容对象转换。




filter:progid:DXImageTransform.Microsoft.Matrix()





可以设置各种角度的旋转，官方demo→Matrix Filter




14.MotionBlur，设置对象模糊，测试完demo之后感觉有点像线性模糊，就是月光投射下来不均匀的模糊效果。




filter:progid:DXImageTransform.Microsoft.MotionBlur()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.MotionBlur(Direction=‘‘,Strength=‘‘,Add=‘‘)





Direction，设置对象模糊方向，从0°~315°照射下来。




Strength ，设置对象模糊范围，单位数值，初始值为5




Add，设置图像模糊是否覆盖在原图上，布尔值，true表示覆盖，false表示不覆盖




官方demo→MotionBlur Filter




15.Wave，设置对象为波浪纹滤镜效果




filter:progid:DXImageTransform.Microsoft.Wave()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Wave(Add=‘‘, LightStrength=‘‘, Phase=‘‘, Strength=‘‘,  Freq=‘‘)





Add，设置滤镜是否覆盖在原图上，布尔值，true表示覆盖，false表示不覆盖




LightStrength，亮度强度，0~100数值，数值越大滤镜效果越明显




Phase，相对偏移值，0~100数值




Strength，设置波浪强度，默认值为5，数值越大，波浪效果越明显。




Frep，设置波浪频率，默认值为3，数值越大，波浪效果越明显。




官方demo→Wave Filter




16.Shadow，设置对象阴影效果。




filter:progid:DXImageTransform.Microsoft.Shadow()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Shadow(color=‘‘, Direction=‘‘, Strength=‘‘)





Color，设置阴影颜色。




Direction，设置阴影的方向，角度也是从0°~315°取值（跟PS的投影效果非常的相似。）




Strength，设置投影强度，数值越大越模糊。




官方demo→Filter




参考资料：http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx


原文地址：http://xiaoho.com/?p=887


				


				
时间： 2024-08-09 01:11:55 

		


		


	

	
	

		


		
了解IE中filter属性的应用！的相关文章


						

		

			

                css中filter属性的用法
			

		

		

									

				转:http://www.cr173.com/html/7817_1.html filter:filtername(parameters)即 filter:滤镜名(参数) 其中,filter是滤镜选择符:filtername是滤镜的属性名,这里包括alpha.blur.chroma等 多种属性:parameters是属性参数值.属性名及参数值请看下面的<filter属性及属性值>. alpha:设置透明层次 blur:创建高速度移动效果,即模糊效果 chroma:制作专用颜色透明 DropSh			

		

	

						

		

			

                CSS中filter属性的使用
			

		

		

									

				filter 属性定义了元素的可视效果 blur 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊. 如果没有设定值,则默认是0:这个参数可设置css长度值,但不接受百分比值. body { background-color: #000; color: skyblue; } div { border: 1px solid #fff; padding: 10px; width: 610px; margin: 10px; }			

		

	

				

		

			

                sphinx中复合属性字段sql_attr_multi的用法
			

		

		

									

				sphinx中复合属性字段sql_attr_multi的用法 sql_attr_multi在sphinx可以用来检索有层级关系的数据,效率相当高,如,在数据库中用一个4层的分类,分类下对应着不用的文章,现在需要做一个文章列表,要求,选择第一级分类时属于它的子分类的文章也要显示出来,就可以用下面的方法建索引 sql_query=                 SELECT di.company_document_id as id,di.company_document_id,          			

		

	

				

		

			

                web.xml中Filter，Listener，Servlet的区别
			

		

		

									

				一.Servlet Servlet是基本的服务端程序,他来自接口Servlet,接口中有方法service.而Servlet的一个重要实现类,则是tomcat服务器的核心,那就是HttpServlet HttpServlet有方法: public abstract class HttpServlet extends GenericServlet { private static final String METHOD_DELETE = "DELETE"; private static			

		

	

				

		

			

                转 Java中Filter、Servlet、Listener的学习
			

		

		

									

				1.Filter的功能filter功能,它使用户可以改变一个 request和修改一个response. Filter 不是一个servlet,它不能产生一个response,它能够在一个request到达servlet之前预处理request,也可以在离开 servlet时处理response.换种说法,filter其实是一个”servlet chaining”(servlet 链). 一个Filter包括: 1).在servlet被调用之前截获; 2).在servlet被调用之前检查serv			

		

	

				

		

			

                Javascript中prototype属性的详解
			

		

		

									

				原文链接:http://www.cnblogs.com/Uncle-Keith/p/5834289.html 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于‘类的’,而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对			

		

	

				

		

			

                CSS中transform 属性
			

		

		

									

				CSS中transform 属性允许你修改CSS可视化模型的坐标空间.通过transform,可以让元素进行移动(translate).旋转(rotate).缩放(scale).倾斜(skew). 如果该属性有一个非none值, 将会产生一个层叠上下文. 在这种情况下 对象将作为它包含的 position: fixed 元素的包含块(a containing block). 初始值 none 适用元素 transformable elements 是否是继承属性 否 Percentages re			

		

	

				

		

			

                Java中Filter、Servlet、Listener的学习
			

		

		

									

				1.Filter的功能filter功能,它使用户可以改变一个 request和修改一个response. Filter 不是一个servlet,它不能产生一个response,它能够在一个request到达servlet之前预处理request,也可以在离开 servlet时处理response.换种说法,filter其实是一个”servlet chaining”(servlet 链). 一个Filter包括: 1).在servlet被调用之前截获; 2).在servlet被调用之前检查serv			

		

	

				

		

			

                Log4Qt使用（三）在DailyRollingFileAppender类中增加属性mMaxBackupIndex
			

		

		

									

				在Log4Qt中存在一个比较大的问题,当使用 DailyRollingFileAppender对日志进行输出时,会无限输出文件,也就是说,当系统运行很久时,日志文件有可能很大,大到无法想象.因此,很多开发者希望在DailyRollingFileAppender中加一个属性,用于配置日志文件的个数. 但是如何做呢? 在Java语言中,我找到一个实例,但是在QT中,没能找到,因此,只能通过自己看源代码,分析从而进行改进. 主要代码如下: dailyrollingfileappender.h: cla