html 页面模糊效果,前端 - 页面滤镜成效及高斯模糊效果
原文链接：
https://blog.csdn.net/MR_LP/article/details/65443047
0.前言
注意：
若文章中发现图片无法加载，请移步作者其他博客。
* 简书
* 掘金
最近在用手机的过程中，发现苹果在非常多的地方都使用了模糊的效果。
高斯效果虽然炫酷，可是咱们身为前端人员，又该如何去模仿这个效果呢？
这时候我们就要说到 CSS 3 中的一个属性，Filter了。
1.Filter
CSS滤镜(filter)：
提供的图形特效，像模糊，锐化或元素变色。
过滤器通常被用于调整图片，背景和边界的渲染。
Filter 的一些基础内容：
名称
说明
初始值
none
适用元素
所有元素;在SVG,它适用于容器元素不包括def元素和所有图形元素
继承性
不继承
适用效果
视觉处理
增添版本
CSS3
JS 语法
object.style.WebkitFilter="grayscale(100%)"
关于适用浏览器版本：
平时推荐大家还是用 Chrome 浏览器来查看效果吧。
除此之外，再补充一下在 MDN 上给出的兼容性说明。
出自之外，Filter 虽然在属性介绍中说明是不继承的，但是它其实和 Opacity 非常类似，都会导致子级发生问题。
这时候我们就要用到另外一个内容，Filter() 函数了。
但是，咱们还是循序渐进，先继续来看 Filter 吧。
在介绍了 Filter 的基础使用之后，我们接下来介绍一下它的属性。
属性名
属性介绍
填写方式
none
无效果
默认值
grayscale
灰度
百分比
sepia
褐色
百分比
saturate
饱和度
百分比
hue-rotate
色相旋转
deg
invert
反色
百分比
opacity
透明度
百分比
brightness
亮度
百分比
contrast
对比度
百分比
blur
模糊
px
drop-shadow
阴影
h-shadow v-shadow blur spread color
既然知道了都有哪些属性，那么我们接下来就来一起看看。
这些属性都是如何去使用的吧。
2.属性的书写
2.1 grayscale ：灰度
示例代码
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:grayscale(1);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
grayscale ：灰度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
灰度会将我们的照片进行灰白处理，其实说白了就是由原本的彩色照片变成 黑白照片而已。
需要注意：
值为100%则完全转为灰度图像，值为0%图像无变化。
值在0%到100%之间，则是效果的线性乘子。
若未设置，W3C说值默认是0，但是实际测试应为 100%。
2.2 sepia ： 褐色
示例代码
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:sepia(1);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
sepia ： 褐色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
sepia 是将图像转换为深褐色。
处理过后能实现一种类似于“老照片”的泛黄感觉。
除此之外，需要注意：
值为100%则完全是深褐色的，值为0%图像无变化。
值在0%到100%之间，则是效果的线性乘子。
若未设置，W3C说值默认是0，但是实际测试应为 100%。
2.3 saturate ：饱和度
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:saturate(4);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
saturate ：饱和度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
saturate 是用于转换图像饱和度。
虽然转换成 0 的话，看上去实现效果和“灰度”差不多。
但是饱和度是可以设置超过原本图片色彩的。
除此之外，需要注意：
值为0%则是完全不饱和，值为100%则图像无变化。
其他值，则是效果的线性乘子。
超过100%的值是允许的，则有更高的饱和度。
若值未设置，值默认是1。
2.4 hue-rotate ：色相旋转
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:hue-rotate(90deg);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
hue-rotate ：色相旋转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
hue-rotate 是给图像应用色相旋转。
数值设定图像会被调整的色环角度值。
注意：
值为0deg，则图像无变化。
若值未设置，默认值是0deg。
该值虽然没有最大值，超过360deg的值相当于又绕一圈。
2.5 invert ：反色
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:invert(1);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
invert ：反色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
invert 是反转输入图像。
就像我们照相机的底片一样。
注意：
100%的价值是完全反转。
值为0%则图像无变化。
值在0%和100%之间，则是效果的线性乘子。
若值未设置，值默认是0。
2.6 透明度
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:opacity(.2);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
opacity ：透明度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
opacity 是转化图像的透明程度。
注意：
值为0%则是完全透明，值为100%则图像无变化。
值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。
若值未设置，值默认是1。
该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
2.7 亮度
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:brightness(2);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
brightness ：亮度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
brightness 是给图片应用一种线性乘法，使其看起来更亮或更暗。
注意：
如果值是0%，图像会全黑。值是100%，则图像无变化。
其他的值对应线性乘数效果。
值超过100%也是可以的，图像会比原来更亮。
如果没有设定值，默认是1。
2.8 contrast ：对比度
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:contrast(2);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
contrast ：对比度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
contrast 是调整图像的对比度。
注意：
值是0%的话，图像会全黑。
值是100%，图像不变。
值可以超过100%，意味着会运用更低的对比。
若没有设置值，默认是1。
2.9 blur ：模糊
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:blur(2px);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
blur ：模糊
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
终于到重头戏了，模糊。
blur 是给图像设置高斯模糊。
“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
注意：
如果没有设定值，则默认是0；
这个参数可设置css长度值，但不接受百分比值。
2.10 drop-shadow ：阴影
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:drop-shadow(5px 5px 5px #ccc);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
drop-shadow ：阴影
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
drop-shadow 是给图像设置一个阴影效果。
阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。
函数接受(在CSS3背景中定义)类型的值，
除了”inset”关键字是不允许的。
该函数与已有的box-shadow box-shadow属性很相似；
不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。
在这里带着大家回顾一下之前 box-shadow 的属性说明：
(必须)
这是设置阴影偏移量的两个 值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果).
(可选)
这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).
(可选)
这是第四个 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
(可选)
查看 该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
2.11 URL ：自定义 XML 文件
解释说明：
URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.
引入方法：
.target { filter:url(#c1); }
.mydiv { filter:url(commonfilters.xml#large-blur)}
1
2
3
2.12 复合写法
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:contrast(175%) brightness(70%);
}
h3{
margin:0;
text-align:center;
font-size:20px;
}
你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
你可以组合任意数量的函数来控制渲染。
例如同时去增强图像的对比度和亮度等等。
3. Filter () 函数
以下部分内容出自 W3Plus。
很多时候，只是希望元素的背景做效果调整，又不希望他会影响其他元素。
而且又没有backdrop-filter属性的情形之下，filter()就显得格外的重要。
在继续往下阅读之前，你要注意一点，filter()并不等于以前介绍过的filter属性。
简单的理解，一个是函数，一个是属性。那么我们今天要说的是filter()函数。
为了能更好的与filter属性区分，filter()函数接受两个参数：
filter(, )
1
其中是指一个图像，是一个过滤器。
这两者结合在一起将会返回一个处理过的新图像。
例如：
.element {
background:filter(url(path/to/img.jpg), blur(5px));
}
1
2
3
因此，你可以给图片使用过滤效果，然后填充到元素中，比如background-filter、background-opacity、background-blur等等。
注意：
规范中定义的过滤函数
和background-size属性一起使用会有Bug
支持动画
需要添加前缀：-webkit-filter()
值得一提的是，backdrop-filter和filter()可以使用CSS3 transition和animation实现一些圆滑的过度效果或动画，甚至还可以使用JavaScript。
html 页面模糊效果,前端 - 页面滤镜成效及高斯模糊效果相关推荐
- iview构建基本html页面,写前端页面步骤----vue+iview
1:用iview构建基本HTML页面 2:在export default{ }中写一个data(){return:{变量:值}}全局对象,用于传递与绑定HTML参数. 3:在export defaul ...
- 解决浏览器页面缩放前端页面大小自适应改变的问题
平时写前端页面的时候,css大小都在用px,现在可以采用rem的方法解决这个问题 首先需要明白px与rem的区别: px是固定的像素,一旦设置了就无法适应页面的大小而进行改变. em和rem是相对长度 ...
- sessionstorage ie8下跨页面_前端页面布局困难？教你用盒子模型一招解决
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个 ...
- 引入html页面比较,前端页面如何引入公用的页面header和footer
很多时候我们做网站开发的时候会遇到一个比较有趣的问题,那就是我们每个页面使用的footer和header,于是当然我们有办法在每个页面都相同的html标签,显然这样代码的复用程度是很低的,我们需要想到 ...
- 解决html页面闪烁,前端页面闪烁的问题解决方案
平时遇见使圈是的编小久据直请结未屏屏会气机页实应高用VUE遇见页面闪烁的问题,总结了三点希望对以后大家开发有帮助能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果: 遇见在如C ...
- 用html实现模糊效果,纯html css实现动态高斯模糊效果（第二弹），实现导航条动态模糊内容...
还是先看效果图: 静态效果图.png GIF.gif 页面布局: 顶部高斯模糊导航条 页面主体 导航条动态高斯模糊实现原理 第一步,将页面主体内容clone到navbar中,然后使用css3 -web ...
- Web项目中前端页面通过URL传中文或 # 特殊字符到后台出现乱码解决方案
对于刚入行新手来说碰到URL传递中文数据到后台出现乱码或是传递包含特使符号'#'后端获取不到的情况是比较头疼的事,这里我就告诉你这两个的解决的方式: 1.URL传递中文 前端页面:中文字符串用 enc ...
- 商城购物系统【用户登录注册，购物页面，购物车页面，订单页面】
商城购物系统 文章目录 商城购物系统 前言 一.使用Mysql数据库建立需要用的商品表,用户表 二.利用html+cs+js对前台进行设计 效果如下 2.对商品页与购物车页进行设计 总结 前言 这学期 ...
- Android使用RenderScript实现图片的高斯模糊效果
Android使用RenderScript实现图片的高斯模糊效果 首先来看一下什么是高斯模糊效果呢? 高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop.G ...
最新文章
- 神策 2020 数据驱动用户大会报名开启
- 在NIO.2中创建文件和目录
- spring+springmvc+hibernate 整合
- Windows VS Linux，Linux或将成为最终赢家？
- qq登陆inc.php,登陆验证 qq登陆验证 php 登陆验证
- mysql jpa 不要自动建表_jpa无法自动创建数据库表
- 一次性搞懂JavaScript 执行机制
- php工具箱怎么换php版本,最新php程序员工具箱 v1.0版本介绍
- 计算机装配方案之游戏发烧型,5000元Intel八代i5-8500配RX580电脑配置 畅玩各类中大型游戏...
- shell脚本下的教你如果运用for，while，unti循环，以及区别l
- 如何解决出现问题，你的PIN不可用，单击以重新设置PIN
- photoshop cs6 下载并安装教程
- 《Java核心技术》学习笔记——第8章 泛型程序设计
- （二）使用Keadm进行部署KubeEdge
- 您需要Administrators提供的权限才能对此文件进行更改
- HTML5期末大作业：汉堡美食网站设计——餐饮美食-汉堡美食(6页) HTML+CSS+JavaScript 汉堡美食 咖啡主题HTM5网页设计作业成品
- java s3 与ceph的关系,ceph S3 对象存储的使用
- 三人成虎，概率却不足十分之五？几个贝叶斯推理故事的分享
- hbase之布隆过滤器
- spring：IOC控制反转中“dI“