我的书签
添加书签
移除书签12.11 滤镜属性
CSS中的滤镜与Photoshop中的滤镜相似，它可以用很简单的方法对网页中的对象进行特效处理。使用滤镜属性可以把一些特殊效果添加到网页元素中，使页面更加美观。
12.11.1 不透明度alpha
alpha属性用于设置对象内容的透明度，使图片产生透明渐变效果。
语法：
说明：
alpha属性包括很多参数，如表12-7所示。
表12-7 alpha属性的参数
| 参 数 | 含 义 |
| opacity | 开始时的透明度，取值范围为0～100，默认值为0，即完全透明，100为完全不透明 |
| finishopacity | 结束时的透明度，取值范围为0～100 |
| style | 设置渐变的样式，其中0表示无渐变，1为直线渐变，2为圆形渐变，3为矩形渐变 |
| startx | 设置透明渐变开始点的水平坐标。其数值作为对象宽度的百分比处理，默认值为0 |
| starty | 设置透明渐变开始点的垂直坐标 |
| finishx | 设置透明渐变结束点的水平坐标 |
| finishy | 设置透明渐变结束点的垂直坐标 |
举例：
在代码中加粗部分的标记用来设置不透明度，图片1将不透明度设置为100，图片2将不透明度设置为70，图片3将不透明度设置为60，图片4将不透明度设置为35，在浏览器中预览效果，如图12.59所示。
图12.59 不透明度效果
12.11.2 动感模糊blur
blur属性用于设置对象的动态模糊效果。
语法：
说明：
blur属性中包括的参数如表12-8所示。
表12-8 blur属性的参数
| 参 数 | 含 义 |
| add | 设置是否显示原始图片 |
| direction | 设置动态模糊的方向，按顺时针的方向以45度为单位进行累积 |
| strength | 设置动态模糊的强度，只能使用整数来指定，默认是5个 |
举例：
在<style></styte>代码中加粗部分的标记用来设置动感模糊样式，在浏览器中预览效果，如图12.60所示。
图12.60 动感模糊效果
12.11.3 对颜色进行透明处理chroma
chroma滤镜的作用是将图片中的某种颜色转换为透明色，产生透明效果。
语法：
举例：
在<style></style>代码中加粗部分的标记用来设置对颜色进行透明处理的样式，分别对图像应用样式，在浏览器中预览效果，如图12.61所示，可以看到左边的图像中红色被替换成了透明，右边的图像中蓝色被替换成了透明。
图12.61 对颜色进行透明处理效果
12.11.4 阴影效果dropShadow
dropShadow滤镜用于设置在指定的方向和位置上产生阴影效果。
语法：
说明：
color属性控制阴影的颜色；
offX和offY分别设置阴影相对于原始图像移动的水平距离和垂直距离；
positive属性设置阴影是否透明。
举例：
在代码中filter: dropShadow（color=#3366FF, offX=2, offY=1, positive=1）标记用来设置阴影，在浏览器中预览效果，如图12.62所示。
图12.62 设置阴影效果
12.11.5 对象翻转flipH、flipV
flipH滤镜用于设置沿水平方向翻转对象，flipV滤镜属性用于设置沿垂直方向翻转对象。
语法：
举例：
在代码中加粗部分的标记用来设置对象的翻转，在浏览器中预览效果，如图12.63所示。
图12.63 对象的翻转效果
12.11.6 发光效果glow
glow滤镜用于设置在对象周围产生发光的效果。
语法：
说明：
color用于设置发光的颜色；
strength用于设置发光的强度，取值范围为1～255，默认值为5。
举例：
在代码中filter: Glow（Color=#fbf412, Strength=8）标记用来设置发光效果，在浏览器中预览效果，如图12.64所示。
图12.64 发光效果
12.11.7 灰度处理gray
gray滤镜用于把彩色图片中的色彩去掉，转换为黑白色图片。
语法：
举例：
在代码中filter:Gray标记用来设置灰度处理，在浏览器中预览效果，如图12.65所示。
图12.65 灰度处理效果
12.11.8 反相invert
invert滤镜用于设置对象反相，可以将图片的颜色、饱和度以及亮度完全反转过来。
语法：
举例：
在代码中filter:Invert标记用来设置反相，在浏览器中预览效果，如图12.66所示。
图12.66 反相效果
12.11.9 X光片效果xray
xray滤镜用于制作类似X光片的效果。
语法：
举例：
在代码中加粗部分的标记用来设置X光片效果，在浏览器中预览效果，如图12.67所示。
图12.67 X光片效果
12.11.10 遮罩效果mask
mask滤镜用于为对象产生遮罩效果，可以做出像印章一样的效果。
语法：
说明：
Color用于设置外围遮盖的颜色，可以是颜色关键字或十六进制数。
举例：
在代码中filter: Mask（Color=#e49c34）标记用来设置遮罩效果，在浏览器中预览效果，如图12.68所示。
图12.68 遮罩效果
12.11.11 波形滤镜wave
wave滤镜用于为对象内容创建波纹扭曲效果。
语法：
说明：
add用于设置是否要把对象按照波形样式打乱；
freq用于设置图片上的波浪数目；
lightstrength用于设置波浪的光照强度，取值范围为0～100;
phase用于设置波浪的起始位置；
strength用于设置波浪的强度大小。
举例：
在代码中filter: Wave（Add=true, Freq=2, LightStrength=20, Phase=50, Strength=40）标记用来设置波纹扭曲效果，在浏览器中预览效果，如图12.69所示。
图12.69 波形效果
