CSS：filter（滤镜）属性-编程知识

CSS：filter（滤镜）属性

用途

可以用于img标签，div标签等

图像，背景，边框的调整

常用属性

1. 灰度

grayscale()，默认是0，100%就是黑白

2. blux

给图像设置高斯模糊的程度，radius值设定高斯模糊的程序，表示像素点合并到一起的程度

不能使用百分比作为参数

3. brightness

调整图片的亮度，参数是百分比

0表示全黑，默认是100%

4. contract对比度

表示明暗的差距，值越小明暗的差距越大；值越大，亮的部分越亮，暗的部分越暗
参数为百分比，0%表示全灰

5. hue-rotate色相反转

参数是度数

超过360度就回来了

6. invert反转图片

参数是百分比
100%表示图片颜色反转

7. opacity图片透明度

参数是百分比

0表示完全透明，

8. saturate图片饱和度

参数是百分比，可以超过百分百，表示过饱和

9. sepia深褐色滤镜

老照片的滤镜

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="filter.css"></head><body><!--黑夜发光图片的demo--><div class="edgeLightDemo"><div class="outSection"></div></div><!--图片不同的效果--><div class="img"><img src="filter.jpg" class="aaa"><img src="filter.jpg" class="bbb"><img src="filter.jpg" class="ccc"><img src="filter.jpg" class="ddd"><img src="filter.jpg" class="eee"><img src="filter.jpg" class="fff"><img src="filter.jpg" class="ggg"><img src="filter.jpg" class="hhh"><img src="filter.jpg" class="iii"></div></body>
</html>

.edgeLightDemo {height: 700px;background-color: black;top: 0;display: flex;z-index: -2;position: relative;
}/*body {*/
/*    background: black;*/
/*}*/.outSection {width: 100px;height: 100px;margin: auto;background: linear-gradient(30deg, #144196, #655ad2);position: relative;/*父亲不设置定位层级*/border-radius: 20px;
}/*在xxx之前新建元素*/
.outSection::before {content: "111";width: 120%;height: 120%;background: linear-gradient(30deg, #144196, #655ad2);/*不设置定位就会变成内联级元素*//*加上定位就会放弃原来的空间，不受父亲的限制*/position: absolute;/*孩子设置定位层级为-1*/z-index: -1;left: -10%;top: -10%;filter: blur(10px);
}.img {margin: 100px auto;display: flex;flex-wrap: wrap;
}.aaa {/*灰度*/filter: grayscale(50%);
}.bbb {/*高斯模糊*/filter: blur(10px);
}.ccc {/*亮度*/filter: brightness(150%);
}.ddd {/*对比度*/filter: contrast(25%);
}.eee {/*色相反转*//*不是颜色反转，而是色相环上的反转*//*加上红色/绿色/蓝色/紫色滤镜*/filter: hue-rotate(180deg);
}.fff {/*颜色反转*//*50%全灰*//*100%完全反转*/filter: invert(100%);
}.ggg {/*透明度*/filter: opacity(30%);
}.hhh {/*饱和度*//*可以超过100%*/filter: saturate(200%);
}.iii {/*深褐色滤镜*/filter: sepia(150%);
}