目录
一、filter（滤镜）属性
二、准备工作
三、常用的filter属性值
1、blur(px)
2、brightness(%)
3、contrast(%)
4、grayscale(%)
5、opacity(%)
6、saturate(%)
7、sepia(%)
8、invert(%)
9、hue-rotate(deg)
10、drop-shadow(h-shadow v-shadow blur spread color)
四、网站置灰效果
一、filter（滤镜）属性
CSS 中的filter属性，用来设置元素的模糊度、灰度、对比度、透明度等视觉效果；
二、准备工作
准备一个html页面，用来编码测试；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img-box {
display: inline-block;
margin-top: 20px;
margin-left: 100px;
}
.image{
width: 200px;
}
/* 效果图样式 */
.img-test{
}
</style>
</head>
<body>
<div class="img-box">
<h4>原图</h4>
<img class="image" src="D:\test\girl.png" alt="">
</div>
<div class="img-box">
<h4>效果图</h4>
<img class="image img-test" src="D:\test\girl.png" alt="">
</div>
</body>
</html>在页面中放两个相同的图片；
通过测试图与原图的对比，可以更加清楚的观察设置了各种filter属性值的效果；
三、常用的filter属性值
| 序号 | 属性值 | 描述 |
|---|---|---|
| 1 | none | 默认值，不设置任何效果； |
| 2 | initial | 设置为默认值； |
| 3 | inherit | 继承父元素的该属性值 |
| 4 | blur(px) | 设置图像的高斯模糊； |
| 5 | brightness(%) | 设置图像的亮度； |
| 6 | contrast(%) | 设置图像的对比度； |
| 7 | grayscale(%) | 设置图像灰度； |
| 8 | opacity(%) | 设置图像的透明度； |
| 9 | saturate(%) | 设置图像的饱和度； |
| 10 | sepia(%) | 设置图像的深褐色转换比例； |
| 11 | invert(%) | 设置图像的反转比例； |
| 12 | hue-rotate(deg) | 设置图像的色相旋转； |
| 13 | drop-shadow(h-shadow v-shadow blur spread color) | 设置图像阴影效果； |
1、blur(px)
该函数用来设置图像的高斯模糊效果；
- 默认值为0（无变化）；
- 值越大，图像越模糊；
- 不接受百分比；
/* 效果图样式 */
.img-test{
/* 1、设置高斯模糊 */
-webkit-filter: blur(3px); /* Chrome, Safari, Opera */
filter: blur(3px);
}
/* 效果图样式 */
.img-test{
/* 1、设置高斯模糊 */
-webkit-filter: blur(6px); /* Chrome, Safari, Opera */
filter: blur(6px);
}
2、brightness(%)
该函数用来设置图像的亮度，使其看起来更亮或更暗；
- 默认值为100%（无变化）；
- 值越大，图像亮度越高；
- 值是0%，图像会全黑；
- 值超过100%，图像会比原来更亮；
/* 效果图样式 */
.img-test{
/* 2、设置亮度 */
-webkit-filter: brightness(60%); /* Chrome, Safari, Opera */
filter:brightness(60%)
}
/* 效果图样式 */
.img-test{
/* 2、设置亮度 */
-webkit-filter: brightness(120%); /* Chrome, Safari, Opera */
filter:brightness(120%)
}
3、contrast(%)
该函数用来设置图像的对比度；
- 默认值100%（无变化）；
- 值越大，对比度越低；
- 值是0%，图像会全黑；
- 值超过100%，对比度会比原来的更低；
/* 效果图样式 */
.img-test{
/* 3、设置图片对比度 */
-webkit-filter: contrast(60%); /* Chrome, Safari, Opera */
filter: contrast(60%);
}
/* 效果图样式 */
.img-test{
/* 3、设置图片对比度 */
-webkit-filter: contrast(120%); /* Chrome, Safari, Opera */
filter: contrast(120%);
}
4、grayscale(%)
该函数用来设置图像的灰度，定义图像灰度的转换比例；
- 默认值为0（无变化）；
- 取值在0%到100%之间；
- 值越大，灰度效果越明显；
- 值是100%，则完全转换为灰度图像；
/* 效果图样式 */
.img-test{
/* 4、设置图像灰度 */
-webkit-filter: grayscale(60%); /* Chrome, Safari, Opera */
filter:grayscale(60%)
}
/* 效果图样式 */
.img-test{
/* 4、设置图像灰度 */
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter:grayscale(100%)
}
5、opacity(%)
该函数用来设置图像的透明程度，定义图像透明度的转换比例；
- 默认值为100%（无变化）；
- 取值在0%到100%之间；
- 值越小，透明程度越明显；
- 值为0%，则完全透明；
/* 效果图样式 */
.img-test{
/* 5、设置图像的透明度 */
-webkit-filter: opacity(20%); /* Chrome, Safari, Opera */
filter: opacity(20%);
}
/* 效果图样式 */
.img-test{
/* 5、设置图像的透明度 */
-webkit-filter: opacity(60%); /* Chrome, Safari, Opera */
filter: opacity(60%);
}
6、saturate(%)
该函数用来设置图像的饱和度，定义图像饱和度的转换比例；
- 默认值为100%（无变化）；
- 值越小，饱和度越低，反之，饱和度越高；
- 值为0%，则完全不饱和；
- 值可以超过100%，设置更高的饱和度；
/* 效果图样式 */
.img-test{
/* 6、设置图像的饱和度 */
-webkit-filter: saturate(60%); /* Chrome, Safari, Opera */
filter: saturate(60%);
}
/* 效果图样式 */
.img-test{
/* 6、设置图像的饱和度 */
-webkit-filter: saturate(160%); /* Chrome, Safari, Opera */
filter: saturate(160%);
}
7、sepia(%)
该函数用来设置图像转换为深褐色的转换比例；
- 默认值为0%（无变化）；
- 取值在0%-100%之间；
- 值越大，转换为深褐色的程度越大；
- 值为100%，则完全是深褐色；
/* 效果图样式 */
.img-test{
/* 7、设置图像转换为深褐色的比例 */
-webkit-filter: sepia(40%); /* Chrome, Safari, Opera */
filter:sepia(40%);
}
/* 效果图样式 */
.img-test{
/* 7、设置图像转换为深褐色的比例 */
-webkit-filter: sepia(80%); /* Chrome, Safari, Opera */
filter:sepia(80%);
}
8、invert(%)
该函数用来设置图像的反转比例；
- 默认值为0%（无变化）；
- 取值在0%-100%之间；
- 值越大，图像反转的比例越大；
- 值为100%，则图像完全反转；
/* 效果图样式 */
.img-test{
/* 8、设置图像的反转比例 */
-webkit-filter: invert(40%); /* Chrome, Safari, Opera */
filter:invert(40%);
}
/* 效果图样式 */
.img-test{
/* 8、设置图像的反转比例 */
-webkit-filter: invert(80%); /* Chrome, Safari, Opera */
filter:invert(80%);
}
9、hue-rotate(deg)
该函数用来设置图像的色相旋转，设定图像会被调整的色环角度值；
- 默认值为0deg（无变化）；
- 没有最大值，超过360的值相当于多旋转一圈；
- 相当于图像的色相为，原值色值在色轮上旋转指定角度后得到的新值；
/* 效果图样式 */
.img-test{
/* 9、设置图像的旋转色相 */
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
filter: hue-rotate(90deg);
}
/* 效果图样式 */
.img-test{
/* 9、设置图像的旋转色相 */
-webkit-filter: hue-rotate(180deg); /* Chrome, Safari, Opera */
filter: hue-rotate(180deg);
}
/* 效果图样式 */
.img-test{
/* 9、设置图像的旋转色相 */
-webkit-filter: hue-rotate(270deg); /* Chrome, Safari, Opera */
filter: hue-rotate(270deg);
}
/* 效果图样式 */
.img-test{
/* 9、设置图像的旋转色相 */
-webkit-filter: hue-rotate(360deg); /* Chrome, Safari, Opera */
filter: hue-rotate(360deg);
}
10、drop-shadow(h-shadow v-shadow blur spread color)
该函数用来设置图像的阴影效果；
- h-shadow：设置水平方向阴影的偏移量，如果为负数，则阴影会出现在元素左边；
- y-shadow：设置垂直方向阴影的偏移量，如果为负数，则阴影会出现在元素上方；
- blur：设置阴影的模糊距离，值越大，越模糊；默认值为0，不允许为负；
- spread：设置阴影的大小，正值会使阴影变大，负值会是阴影变小，默认值为0；
- color：设置阴影的颜色；
注意：一些浏览器不支持spread属性，加了也不会渲染；
/* 效果图样式 */
.img-test{
/* 10、设置图像阴影 */
-webkit-filter: drop-shadow(0 0 6px #409eff); /* Chrome, Safari, Opera */
filter: drop-shadow(0 0 6px #409eff);
}
/* 效果图样式 */
.img-test{
/* 10、设置图像阴影 */
-webkit-filter: drop-shadow(6px 6px 10px yellowgreen); /* Chrome, Safari, Opera */
filter: drop-shadow(6px 6px 10px yellowgreen);
}
四、网页置灰效果
在一些特殊时间，会看到很多网站都置灰了；这种效果使怎么实现的？？？
其实很简单，只需要一个属性就可以了！！！
/* 将整个网页置灰 */
html {
filter: grayscale(100%);
}就拿CSDN网站为例（仅仅只是为了示范，绝无其他意图！）
【CSDN首页】原始效果：
【CSDN首页】置灰效果：
测试方法：
=========================================================================
每天进步一点点~！
快来试试这个友好的CSS属性吧~
