CSS3 中filter（滤镜）属性使用详解

OStack程序员社区-中国程序员成长平台 › 门户 › 安全›安全教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

最近在修改内网门户的时候，恰好遇到了需要使用滤镜的地方；刚开始用的是两张图片；鼠标滑过背景变成渐变；图标切换；但是后台配置了图标后；导致鼠标滑过图标不能正常切换；于是就想到了滤镜的效果来处理。所以顺便学习了一下常用的滤镜效果。

使用滤镜：

前言

css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过css对图像进行处理。

浏览器支持情况：只有IE浏览器不支持filter（滤镜）属性，为了兼容低版本的safari和google浏览器，需要加上前缀-webkit- 。

常用属性

使用语法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

CSS 滤镜可以给同个元素同时定义多个，例如 filter: contrast(150%) brightness(1.5) ，但是滤镜的先后顺序不同产生的效果也是不一样的；

默认值为： initial

inherit 表示从父级继承。

注意:滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

normal 正常

未添加滤镜

<div data-filter="image-normal">
 <h2>normal</h2>
 <img src="1.jpg">
</div>

grayscale 灰阶

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。若未设置，值默认是0。也可以写0-1之间的小数。

<div data-filter="image-grayscale">
 <h2>grayscale</h2>
 <img src="1.jpg">
</div>


//值为0-1之间的小数,  grayscale(0) 原图；grayscale(1）完全变成灰色；
[data-filter=image-grayscale] img {
  filter: grayscale(50%);
  -webkit-filter：grayscale(50%);  /* Chrome, Safari, Opera */
}

saturate 饱和度

值为0时显示黑白色，值为0.5时饱和度为原图的一半，值为1时，表示饱和度等于原图，数值大于1表示饱和度加强。

//（值为0-1之间的小数）
<div data-filter="image-saturate">
 <h2>saturate</h2>
 <img src="1.jpg">
</div>

饱和对是对色彩的浓度（纯度）的定义。饱和度画面中色彩的鲜艳程度与层次；

[data-filter=image-saturate] img {
  filter: saturate(360%);
  -webkit-filter：saturate(360%); /* Chrome, Safari, Opera */
}

sepia 棕褐色

0表示褐色度为0%，显示原图，1 表示褐色度为100%显示褐色。

<div data-filter="image-sepia">
 <h2>sepia</h2>
 <img src="1.jpg">
</div>

[data-filter=image-sepia] img {
  filter: sepia(100%);
  -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
}

invert 反色

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

<div data-filter="image-invert">
 <h2>invert</h2>
 <img src="1.jpg">
</div>

[data-filter=image-invert] img {
  filter: invert(100%);
  -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
}

opacity 透明度

图像的透明程度。值为0%则是完全透明，值为100%则图像无变化。0-100%之间则是部分透明。也可以用0-1之间的小数替代%。与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

<div data-filter="image-opacity">
 <h2>opacity</h2>
 <img src="1.jpg">
</div>

[data-filter=image-opacity] img {
  filter: opacity(50%);
  -webkit-filter: opacity(50%); /* Chrome, Safari, Opera */
}

brightness 亮度

使图片更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%，图像会比原来更亮。如果没有设定值，默认是1。可以使用百分比也可以使用小数表示。

<div data-filter="image-brightness">
 <h2>brightness</h2>
 <img src="1.jpg">
</div>

[data-filter=image-brightness] img {
  filter: brightness(120%);
  -webkit-filter: brightness(120%); /* Chrome, Safari, Opera */
}

contrast 对比度

调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值超过100%，意味着会运用更低的对比。若没有设置值，默认是1。可以使用百分比也可以使用小数表示。对比度是对画面明暗程度的定义。对比度是指画面黑白明暗的层次。

<div data-filter="image-contrast">
 <h2>contrast</h2>
 <img src="1.jpg">
</div>

[data-filter=image-contrast] img {
  filter: contrast(160%);
  -webkit-filter: contrast(160%); /* Chrome, Safari, Opera */
}

hue-rotate 色相旋转

给图像应用色相旋转。让图像中的颜色，在色相环中做对应的旋转。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

<div data-filter="image-hue-rotate">
 <h2>hue-rotate</h2>
 <img src="1.jpg">
</div>

[data-filter=image-hue-rotate] img {
  filter: hue-rotate(160deg);
  -webkit-filter: hue-rotate(160deg); /* Chrome, Safari, Opera */
}

blur 模糊

给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊。

<div data-filter="image-blur">
 <h2>blur</h2>
 <img src="1.jpg">
</div>


[data-filter=image-blur] img {
  filter: blur(2px);
  -webkit-filter: blur(2px); /* Chrome, Safari, Opera */
}

drop-shadow 阴影

与 box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

<div data-filter="drop-shadow">
 <h2>blur</h2>
 <img src="1.jpg">
</div>

[data-filter=drop-shadow] img {
  filter: drop-shadow(16px 16px 20px blue);
  -webkit-filter: drop-shadow(16px 16px 20px blue); /* Chrome, Safari, Opera */
}

对比box-shadow

添加阴影属性。

<div data-filter="box-shadow">
 <h2>blur</h2>
 <img src="1.jpg">
</div>

/* 添加阴影效果*/
[data-filter=box-shadow] img {
  box-shadow:16px 16px 20px blue;
  -webkit-filter:box-shadow:16px 16px 20px blue; /* Chrome, Safari, Opera */
}

box-shadow和drop-shadow 还是有区别的；效果上看 box-shadow 是给整个图片加阴影，而 drop-shadow 只是给不透明的部分加阴影。

multiple 多个滤镜效果

<div data-filter="multiple-filter">
 <h2>blur</h2>
 <img src="1.jpg">
</div>

/*调整按钮和图片的亮度和对比度*/
[data-filter=multiple-filter] img {
   filter: contrast(175%) brightness(3%);
   -webkit-filter: contrast(175%) brightness(3%);/* Chrome, Safari, Opera */
}

融合效果

/* blur 混合 contrast 产生融合效果 */
.filter-mix {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    filter: contrast(20);
    background: #fff;
}
.filter-mix::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #333;
    top: 40px;
    left: 40px;
    z-index: 2;
    filter: blur(6px);
    box-sizing: border-box;
    animation: filterBallMove 4s ease-out infinite;
}

.filter-mix::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #3F51B5;
    top: 60px;
    right: 40px;
    z-index: 2;
    filter: blur(6px);
    animation: filterBallMove2 4s ease-out infinite;
}

@keyframes filterBallMove {
    50% {
        left: 140px;
    }
}

@keyframes filterBallMove2 {
    50% {
        right: 140px;
    }
}

火焰效果

filter: contrast() 与 filter: blur() 和animation 配合制作火焰效果。

filter: blur(20px) contrast(30);

animation: move 2s infinite 0.2s linear;

scss滤镜样式

$filters: (
 grayscale: '(50%)',//灰阶
 saturate: '(360%)',//饱和度
 sepia: '(100%)',//棕褐色
 invert: '(100%)',//反色
 opacity: '(50%)',//透明度
 brightness: '(120%)',//亮度
 contrast: '(160%)',//对比度
 hue-rotate: '(160deg)', //色相旋转
 blur: '(2px)',//模糊  
 drop-shadow:'drop-shadow(16px 16px 20px blue)',//阴影
);

@each $type, $value in $filters {
 [data-filter="image-#{$type}"] {
  img {
       filter: #{$type}#{$value};
  }
 }
}

总结

到此这篇关于CSS3 中filter（滤镜）属性使用详解的文章就介绍到这了,更多相关css3 filter 滤镜内容请搜索极客世界以前的文章或继续浏览下面的相关文章，希望大家以后多多支持极客世界！

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期

11-06 可心卡盟:win10系统火狐flash插件崩溃怎么

11-06 亲亲特价:怎么删除回收站图标

11-06 济南大学虚拟社区:鲁大师节能降温的具体办

11-06 xlueops.exe:无线网络安装向导

11-06 女斗合众国:win7系统cf与主机连接不稳定怎

11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头

11-06 qizideyouhuo:应用程序无法正常启动0xc0000

11-06 ipz-185:win7系统vcf文件怎么打开

11-06 傻哥蹦迪:win10系统s4怎么打开usb调试

11-06 八神浩树gtaste:回收站清空了怎么恢复

11-06 妖尾之黑色守护:win10系统电脑没有1440x900

11-06 校园至尊魔王小说:win7系统浏览网页时字体

11-06 女斗合众国:win10系统访问共享文件夹提示请

11-06 tokyo hot n0654:恢复win7系统默认字体一招

11-06 雨酷仙境:设置win7系统转移临时文件夹腾出

11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原

11-06 tunespotting:win10系统火狐flash插件总是

11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什

11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密

11-06 博益网首页:ao3网页版进入不了解决方法

11-06 漏斗子专栏: 网站数据分析小白易懂精华篇

11-06 见证双虹怎么做:win7系统开启telnet命令的

11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务

11-06 国光中学校歌:提交网站到alexa查询详细步骤

11-06 西安有情天:静态网页和动态网页的区别

11-06 红木雅尚斋:外部链接构造对网站的好处

11-06 前官礼遇：防止域名劫持–增强域安全性的10

11-06 密传二转答案: 中文分词算法有哪些

11-06 金泉家园邮编:百度快照劫持的表现及应对方

一段css让全站变灰的代码总结发布时间：2022-06-21

css中引入指定字体@font-face兼容各浏览器的问题发布时间：2022-06-21

剪的笔顺,诠释剪的笔画,认识剪的部首

1 六六分期app的软件客服如何联系？(六六分期

六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期

阅读：19799|2023-10-27

2 可心卡盟:win10系统火狐flash插件崩溃怎么

今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知

阅读：10153|2022-11-06

3 亲亲特价:怎么删除回收站图标

今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道

阅读：8421|2022-11-06

4 济南大学虚拟社区:鲁大师节能降温的具体办

今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要

阅读：8781|2022-11-06

5 xlueops.exe:无线网络安装向导

我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多

阅读：8739|2022-11-06

6 女斗合众国:win7系统cf与主机连接不稳定怎

今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不

阅读：9809|2022-11-06

7 0xc000022-[cf烟雾头]cf怎么调烟雾头

电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很

阅读：8725|2022-11-06

8 qizideyouhuo:应用程序无法正常启动0xc0000

我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法

阅读：8094|2022-11-06

9 ipz-185:win7系统vcf文件怎么打开

今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win

阅读：8770|2022-11-06

10 傻哥蹦迪:win10系统s4怎么打开usb调试

今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎

阅读：7609|2022-11-06

客服电话

电子邮件

CSS3 中filter（滤镜）属性使用详解

请发表评论

全部评论

上一篇：

下一篇：

zousiyu1995/Study-LaTeX: LaTeX学习笔记

librespeed/speedtest: Self-hosted Speedt

avehtari/BDA_m_demos: Bayesian Data Anal

四维彩超怎么看性别？四维看男孩女孩诀窍

IntelliJ IDEA创建第一个Java小程序

剪的笔顺,诠释剪的笔画,认识剪的部首

六六分期app的软件客服如何联系？(六六分期

florent37/ViewAnimator: A fluent Android

florent37/Shrine-MaterialDesign2: implem

CVE-2020-36276

SimpleSoftwareIO/simple-sms: Send and re

关于我们

产品与服务

解决方案

139-2527-9053