day13 滤镜部分知识点补充

目录

1.CSS3滤镜

2.属性值（以下都是属于图片属性filter的属性值）

1.修改所有图片的颜色为黑白

2.设置高斯模糊

3.使其看起来更亮或更暗。

4.调整图像的对比度。

5.给图像应用色相旋转。

6.反转输入图像。

7.转化图像的透明程度。

8.转换图像饱和度。

9.将图像转换为深褐色。

10.URL函数

11.图片阴影

---

 

1.CSS3滤镜

CSS 滤镜就是提供类似 PS 的图形特效，像模糊，锐化或元素变色等功能。通常被用于调整图片，背景和边界的渲染。

filter:属性值;

2.属性值（以下都是属于图片属性filter的属性值）

1.修改所有图片的颜色为黑白

(100% 灰度)

grayscale(100%)

2.设置高斯模糊

单位为px，值越大越模糊

blur(10px)

3.使其看起来更亮或更暗。

如果值是0%，图像会全黑。值是100%，则图像无变化。可以超过100%;

brightness(%)

4.调整图像的对比度。

contrast(%)

值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。

5.给图像应用色相旋转。

hue-rotate(deg)

值为0deg，则图像无变化。超过360deg的值相当于又绕一圈。

6.反转输入图像。

invert(%)

值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。

7.转化图像的透明程度。

opacity(%)

值定义转换的比例。0%则是完全透明,100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

8.转换图像饱和度。

saturate(%)

0%则是完全不饱和，100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。效果跟grayscale好像

9.将图像转换为深褐色。

sepia(%)

100%则完全是深褐色的，0%图像无变化。最大值为100%

10.URL函数

url函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

url()

11.图片阴影

drop-shadow(offset-x offset-y blur-radius spread-radius color)

这个属性与box-shadow属性很像，但是它没有inset这个关键字，使用滤镜的这个属性，浏览器为了更好的性能提升会使用硬件加速，第一个值设置X轴的偏移程度，负数则是在图像的左边，第二个值则是设置Y轴的偏移程度，前两个值必填。第三个值是用来设置模糊程度，值越大越模糊，阴影越大，不允许设置负值。第四个值正数会使得阴影变大，负数使得阴影缩小 第五个颜色的值则是用来设定颜色