笔记 - 10.4、HTML - CSS滤镜笔记

    xiaoxiao2026-05-27  4

    15.CSS滤镜filter:(filter属性不属于w3c标准,只对IE有效) --- ①不透明度:     filter:alpha(参数1=参数值, 参数2=参数值, . . .);     参数:       -- opacity:开始时的透明度,取值范围为0-100,默认值为0,即为完全透明,100为完全不透明;       -- finishopacity:结束是的透明度,取值为0-100;       -- style:设置渐变的样式,其中0表示无渐变,1为直线渐变,2为圆形渐变,3为矩形渐变;       -- startx:设置透明渐变的开始点的水平坐标。其参数值作为对象宽度的百分比处理,默认值为0;       -- starty:设置透明渐变的开始点的垂直坐标;       -- finishx:设置透明渐变的结束点的水平坐标;       -- finishy:设置透明渐变的结束点的垂直坐标。 --- ②动感模糊blur:     filter:blur(add=参数值, direction=参数值, strength=参数值);     参数:       -- add:设置是否显示原始图片,取值为true或false;       -- direction:设置动感模糊的方向,按顺时针的方向以45度为单位进行累积;       -- strength:设置动感模糊的强度,只能使用整数来指定默认是5个。 --- ③对颜色进行透明处理chroma:     filter:chroma(color=颜色值);     参数:       -- color:需要进行透明处理的颜色值。 --- ④阴影效果dropShadow:     filter:dropShadow(color=阴影颜色, offX=参数值, offY=参数值, positive=参数值);     参数:       -- color:阴影的颜色;       -- offX:阴影相对原始图像的移动的水平距离;       -- offY:阴影相对原始图像的移动的垂直距离;       -- positive:设置 阴影是否透明,1或0。 --- ⑤对象翻转flipH、flipV:     flipH滤镜用于设置沿水平方向翻转对象,flipV滤镜用于设置沿垂直方向翻转对象。     filter:flipH;     或     filter:flipV; --- ⑥发光效果glow:     用于设置在对象周围产生发光的效果。     filter:Glow(color=颜色, strength=强度值);     参数:       -- color:设置发光的颜色;       -- strength:设置光的强度。取值为1~255,默认值为5。 --- ⑦灰度处理gray:     用于把彩色图片中的色彩去掉,转换为黑白图片。     filter:Gray; --- ⑧反相invert:     用于设置图片的反相,可以将图片的颜色,饱和度以及亮度完全反转过来。     filter:invert; --- ⑨X光片效果xray:     用于制作类似X光片的效果。     filter:Xray; --- ⑩遮罩效果mask:     用于为对象产生遮罩效果,可以做出像印章一样的效果。     filter:Mask(color=颜色);     参数:       -- color:颜色值。 --- ⑩①波形滤镜wave:     用于为对象内容创建波纹扭曲效果。     filter:wave(add=参数值, freq=参数值, lightstrength=参数值,phase=参数值, strength=参数值);     参数:       -- add:设置是否要把对象按照波形样式打乱,true或false;       -- freq:设置图片上的波浪数目;       -- lightstrength:设置波浪的光照强度,取值为0~100;       -- phase:设置波浪的起始位置;       -- strength:波浪的强度大小。 相关资源:python入门教程(PDF版)
    最新回复(0)