CSS3 中filter(滤镜)属性使用详解


Posted in HTML / CSS onApril 07, 2020

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

CSS3 中filter(滤镜)属性使用详解

使用滤镜:

CSS3 中filter(滤镜)属性使用详解

前言

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

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

CSS3 中filter(滤镜)属性使用详解

常用属性

使用语法:

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 正常

未添加滤镜

CSS3 中filter(滤镜)属性使用详解

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

grayscale 灰阶

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

CSS3 中filter(滤镜)属性使用详解

<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表示饱和度加强。

CSS3 中filter(滤镜)属性使用详解

//(值为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%显示褐色。

CSS3 中filter(滤镜)属性使用详解

<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。

CSS3 中filter(滤镜)属性使用详解

<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,一些浏览器为了提升性能会提供硬件加速。

CSS3 中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。可以使用百分比也可以使用小数表示。

CSS3 中filter(滤镜)属性使用详解

<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。可以使用百分比也可以使用小数表示。 对比度是对画面明暗程度的定义。对比度是指画面黑白明暗的层次。

CSS3 中filter(滤镜)属性使用详解

<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的值相当于又绕一圈。

CSS3 中filter(滤镜)属性使用详解

<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,就是不模糊。

CSS3 中filter(滤镜)属性使用详解

<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属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。

CSS3 中filter(滤镜)属性使用详解

<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

添加阴影属性。

CSS3 中filter(滤镜)属性使用详解

<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 多个滤镜效果

CSS3 中filter(滤镜)属性使用详解

<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 */
}

融合效果

CSS3 中filter(滤镜)属性使用详解

/* 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;
    }
}

火焰效果

CSS3 中filter(滤镜)属性使用详解

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 滤镜内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 #HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 #HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 #HTML / CSS
css3 中translate和transition的使用方法
Mar 26 #HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 #HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 #HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 #HTML / CSS
You might like
php中神奇的fastcgi_finish_request
2011/05/02 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
jQuery代码优化之基本事件
2011/11/01 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
JS重载实现方法分析
2016/12/16 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
python判断字符串是否是json格式方法分享
2017/11/07 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
django foreignkey(外键)的实现
2019/07/29 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python列表切片常用操作实例解析
2020/03/10 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
护士个人自我鉴定
2014/03/24 职场文书
质量保证书范本
2014/04/29 职场文书
农村文化活动总结
2014/08/28 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
安全教育片观后感
2015/06/17 职场文书
初中政治教学工作总结
2015/08/13 职场文书
远程教育培训心得体会
2016/01/09 职场文书