CSS filter（滤镜）属性，并实现页面置灰效果

白菜不太菜

已于 2024-07-04 18:25:21 修改

阅读量4.9k

点赞数 22

分类专栏： CSS 文章标签： css filter属性前端

于 2024-07-04 18:24:34 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65029152/article/details/140126829

版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

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%);
}

就拿优快云网站为例（仅仅只是为了示范，绝无其他意图！）

【优快云首页】原始效果：

【优快云首页】置灰效果：

测试方法：

=========================================================================

每天进步一点点~！

快来试试这个友好的CSS属性吧~