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实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 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
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python读取word文本操作详解
2018/01/22 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python笔记之facade模式
2019/11/20 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
Python接口测试文件上传实例解析
2020/05/22 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
金融专业个人求职信
2013/09/22 职场文书
责任心演讲稿
2014/05/14 职场文书
美术专业自荐信
2014/07/07 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
班主任经验交流材料
2014/12/16 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技