CSS之filter（滤镜）

CSS之filter（滤镜）
 最后更新于 2024年10月02日 07:14:09

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

界面滤镜

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

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

AlphaImageLoader

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

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader()
/* 完整写法 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true' , sizingMethod='' , src='mini.jpg')
属性特性描述
enabledenabled可选值。是否启用滤镜。默认为true
sizingMethodsizingMethod可选值。图像在对象边界显示方式。
crop: 剪切图像以适应对象的尺寸;
image: 默认值。扩大或减少对象的边界，适应图像尺寸;
scale: 伸展或收缩图像填充对象的边界
srcsrc必须值，引入图片

Gradient

设置渐变

filter: progid:DXImageTransform.Microsoft.Gradient()
/* 完整写法 */
filter: progid:DXImageTransform.Microsoft.Gradient(enabled='ture',GradientType='1',StartColorStr='#00000000',EndColorStr='#FFFF3300')
属性特性描述
enabledEnabled可选值，Boolean布尔值，默认值为ture，启用过滤器；false为不启用过滤器。
StartColorStrStartColor设置或者检索开始不透明度的梯度值，整数型Integer，指定一个整数型值，值的变化从0 (transparent[透明]) 到 4294967295 ([白色不透明])
StartColorStr设置或者检索开始的颜色值，string类型字符串，值从#FF000000 到 #FFFFFFFF，默认值为：#FF000000，比如一个值为：#AARRGGBB ，那么AA代表透明度alpha，RR表示红色16进制值，GG表示绿色16进制值，BB表示黑色16进制值。
EndColor设置或者检索结束不透明度的梯度值，同上，很少用。
EndColorStr设置或者检索结束的颜色值，同上
GradientType设置渐变的方向。有两个值，1代表水平方向，0代表垂直方向渐变。

静态滤镜

Alpha

调整对象内容的不透明度

filter: progid:DXImageTransform.Microsoft.Alpha()
/* filter:alpha(opacity=70); */
/* 完整写法 */
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

BasicImage

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

filter: progid:DXImageTransform.Microsoft.BasicImage()
/* 完整写法 */
filter: progid:DXImageTransform.Microsoft.BasicImage(Grayscale='x', Xray='x', Mirror='x', Invert='x', Opcity='x', Rotation='x')
属性描述
GrayScale设置或调整对象的灰度值
XRay设置或调整对象的X射线，布尔值，0正常显示，1代表X射线。灰白效果
Mirror设置或调整对象镜像。0正常显示，1内容对象将翻过来
Mask设置或调整对象的的RGB是否为MashColor值，0默认值，显示正常RGB值，1表示改变内容为MashColor（不常用）
Invert设置或调整对象的反相。蓝色光效果
Opacity设置或调整对象的透明度
Rotation设置或调整对象旋转，0正常显示，1代表旋转90°，2代表旋转180°，3代表旋转270°

Loading...

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那么该值无效

Loading...

Chroma

设置对象的色彩透明度

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

/* Color，设置颜色值。对象中有color的部分为完全透明 */
<div style="background: #666666;  border:3px solid black;color:white; font-weight:bold;
filter:progid:DXImageTransform.Microsoft.Chroma(Color='') ">

Loading...

Compositor

设置新对象内容的合成颜色，2个对象，要显示哪个或者隐藏哪个，或者显示他们对比之后的新对象。

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

function值有18个值

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设置投影的透明或者非透明

Emboss

设置对象的浮雕效果

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

Loading...

Engrave

设置对象的雕刻效果。

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

Loading...

Glow

设置对象的光晕效果。

filter: progid:DXImageTransform.Microsoft.Glow ()
/* 完整写法 */
filter: progid:DXImageTransform.Microsoft. Glow(color='', Strength='')
属性描述
color设置光晕颜色
Strength设置光晕的宽度，数值单位

Loading...

Light

设置对象的亮度

filter: progid:DXImageTransform.Microsoft.Light()
/* 完整写法 */
filter: progid:DXImageTransform.Microsoft. Glow(color='', Strength='')
属性描述
addAmbient加入对象环境光
addCone加入锥形光源
addPoint加入点光源
changeColor改变亮度颜色
changeStrength改变亮度长度
clear清除亮度
moveLight移动光源焦点

ICMFilter

设置对象颜色内容改变，使其显示像打印设备的颜色。 这个滤镜仅仅应用于屏幕内容显示效果上，当内容是打印时，将不应用。

MaskFilter

设置对象内容透明或者非透明颜色

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

Matrix

调整大小、旋转或翻转使用矩阵的内容对象转换

filter: progid:DXImageTransform.Microsoft.Matrix()

MotionBlur

设置对象模糊

filter: progid:DXImageTransform.Microsoft.MotionBlur()
/* 完整写法 */
filter:progid:DXImageTransform.Microsoft. MotionBlur (Direction='', Strngth='', Add='')
属性描述
Direction设置对象模糊方向，从0°~315°照射下来。需要有Strength值
Strength设置对象模糊范围，单位数值，初始值为5
Add设置图像模糊是否覆盖在原图上，布尔值，true表示覆盖，false表示不覆盖

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，数值越大，波浪效果越明显

Loading...

Shadow

设置对象阴影效果

filter: progid:DXImageTransform.Microsoft.Shadow()
/* 完整写法 */
filter: progid:DXImageTransform.Microsoft.Shadow(color='', Direction='', Strength='')
属性描述
Color设置阴影颜色
Direction设置阴影的方向，角度从0°~315°取值（跟PS的投影效果非常的相似。）
Strength设置投影强度，数值越大越模糊

Loading...