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%)"

关于适用浏览器版本:

15433752.png

平时推荐大家还是用 Chrome 浏览器来查看效果吧。

除此之外,再补充一下在 MDN 上给出的兼容性说明。

15433753.png

15433754.png

出自之外,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;

}

IMG_3479.JPG

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

实现效果:

15433755.gif

解释说明:

灰度会将我们的照片进行灰白处理,其实说白了就是由原本的彩色照片变成 黑白照片而已。

需要注意:

值为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;

}

IMG_3479.JPG

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

实现效果:

15433756.gif

解释说明:

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;

}

IMG_3479.JPG

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

实现效果:

15433757.gif

解释说明:

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;

}

IMG_3479.JPG

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

实现效果:

15433758.gif

解释说明:

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;

}

IMG_3479.JPG

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

实现效果:

15433759.gif

解释说明:

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;

}

IMG_3479.JPG

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

实现效果:

15433760.gif

解释说明:

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;

}

IMG_3479.JPG

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

实现效果:

15433761.gif

解释说明:

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;

}

IMG_3479.JPG

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

实现效果:

15433762.gif

解释说明:

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;

}

IMG_3479.JPG

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

实现效果:

15433763.gif

解释说明:

终于到重头戏了,模糊。

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;

}

IMG_3479.JPG

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

实现效果:

15433764.gif

解释说明:

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;

}

IMG_3479.JPG

你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。

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

实现效果:

15433765.gif

解释说明:

你可以组合任意数量的函数来控制渲染。

例如同时去增强图像的对比度和亮度等等。

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

15433766.png

注意:

规范中定义的过滤函数

和background-size属性一起使用会有Bug

支持动画

需要添加前缀:-webkit-filter()

值得一提的是,backdrop-filter和filter()可以使用CSS3 transition和animation实现一些圆滑的过度效果或动画,甚至还可以使用JavaScript。

15433767.gif

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值