2022-03-17 css3滤镜属性(filter)的用法和示例

一.定义

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。
该属性默认值是none,不可继承,支持动画animat,是css3新增特性

二.语法

filter: 函数名()

三.filter函数

1.none 默认值，没有效果。

2.blur(px) 给图像设置模糊度,(值是css长度值)值越大越模糊；

3.brightness(%) 给图像设置亮度,(值是百分比)值越大越亮；

4.contrast(%) 给图像设置对比度。(值是百分比)百分比越高，对比度越明显,如果值是0%时，元素只有浅灰

5.opacity(%) 给图像设置透明度。(值是百分比)值越小越透明

四.filter:alpha()属性

基本属性

filter：alpha（opacity，finishopacity，style，startX，startY，finishX，finishY）

• opacity代表透明度数,选值0-100,0是完全透明,100是不透明.

• finishopacity用来设置结束时的透明度,以达到渐变效果.取值范围也是0-100.

• style指渐变类型,0是无变化,1是线行渐变,2是放射渐变,3是X型渐变.

• StartX和StartY： 代表渐变透明效果的开始X和Y坐标。

• FinishX和FinishY： 代表渐变透明效果结束X和Y 的坐标。

例子

a:hover {
  opacity: 1;  
  filter: alpha(opacity=100);
}

示例和参考文档

https://www.runoob.com/cssref/css3-pr-filter.html
https://blog.csdn.net/qq_44849271/article/details/120113819