本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

CSS使用filter和backdrop-filter实现高斯模糊效果

css 来源：互联网 作者：佚名 发布时间：2024-09-26 22:01:56 人浏览
摘要

今天接到一个需求是，使用高斯模糊的效果对一个页面进行模糊处理，正好借这个机会来整理一下 css3 中高斯模糊的两个 API API介绍 filter 说明： 该 API 是一个过滤器，不仅能实现高斯模糊，还

今天接到一个需求是，使用高斯模糊的效果对一个页面进行模糊处理，正好借这个机会来整理一下 css3 中高斯模糊的两个 API

API介绍

filter

说明：
该 API 是一个过滤器，不仅能实现高斯模糊，还有很多比如颜色偏移、饱和度、灰度等等

语法：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// 使用空格分隔多个滤镜

filter: none;

// 高斯模糊

filter: blur(4px);

// 线性亮度

filter: brightness();

// 对比度

filter: contrast();

// 阴影效果

filter: drop-shadow();

// 灰度

filter: grayscale();

// 色相旋转

filter: hue-rotate();

// 反转图像

filter: invert();

// 转换透明度

filter: opacity();

// 饱和度

filter: saturate();

// 褐色

filter: sepia();

// SVG滤镜

filter: url();

其中高斯模糊 filter: blur();

backdrop-filter

说明：
当你创造一个元素加上这个属性后，会使得这个元素后面的区域添加效果（如模糊或颜色偏移）

对比：
filter 属性必须要加载图像上或者背景图上，而 backdrop-filter 只要是一个元素就可以。

语法：

1

2

3

4

5

6

7

8

9

10

backdrop-filter: blur(2px);

backdrop-filter: brightness(60%);

backdrop-filter: contrast(40%);

backdrop-filter: drop-shadow(4px 4px 10px blue);

backdrop-filter: grayscale(30%);

backdrop-filter: hue-rotate(120deg);

backdrop-filter: invert(70%);

backdrop-filter: opacity(20%);

backdrop-filter: sepia(90%);

backdrop-filter: saturate(80%);

示例

filter例一

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

<!DOCTYPE html>

<html lang="en">

  <head>

    <style>

      .wrapBox2 {

        width: 800px;

        height: 300px;

        overflow: hidden;

        position: relative;

        background-image: url("./win.jpeg");

        background-size: 100% 100%;

        background-repeat: no-repeat;

        filter: blur(10px);

      }

      .subBox {

        position: absolute;

        width: calc(100% - 100px);

        height: calc(100% - 100px);

        z-index: 2;

      }

      .text {

        position: relative;

        /* z-index: 10; */

        font-size: 40px;

        font-weight: bold;

        color: #f00;

      }

    </style>

  </head>

  <body>

    <div class="wrapBox2">

      <div class="subBox"></div>

      <div class="text">全部模糊</div>

    </div>

  </body>

</html>

这里要注意的一点是，添加模糊后，实际的大小会超出我们设置的宽高，因为周围的毛边效果，你可以在外面包一层并设置 overflow: hidden;

filter例二

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

<!DOCTYPE html>

<html lang="en">

  <head>

    <style>

      .wrapBox2 {

        width: 800px;

        height: 300px;

        /* overflow: hidden; */

        position: relative;

      }

      .subBox {

        width: 100%;

        height: 100%;

        position: absolute;

        width: calc(100% - 100px);

        height: calc(100% - 100px);

        z-index: 2;

        filter: blur(10px);

      }

      .text {

        position: relative;

        /* z-index: 10; */

        font-size: 40px;

        font-weight: bold;

        color: #f00;

      }

    </style>

  </head>

  <body>

    <div class="wrapBox2">

      <img src="./win.jpeg" class="subBox" />

      <div class="text">全部模糊</div>

    </div>

  </body>

</html>

这种方式的话，文字和图片由于是平级的，所以文字要么在图片下方，要么在上方（根据z-index来控制），而不会对文字进行模糊。

backdrop-filter例一

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

<!DOCTYPE html>

<html lang="en">

  <head>

    <style>

      .wrapBox2 {

        width: 800px;

        height: 300px;

        overflow: hidden;

        position: relative;

        background-image: url("./win.jpeg");

        background-size: 100% 100%;

        background-repeat: no-repeat;

      }

      .subBox {

        position: absolute;

        width: calc(100% - 100px);

        height: calc(100% - 100px);

        z-index: 2;

        backdrop-filter: blur(10px);

        /* top: 100px; */

      }

      .text {

        position: relative;

        /* z-index: 10; */

        font-size: 40px;

        font-weight: bold;

        color: #f00;

      }

    </style>

  </head>

  <body>

    <div class="wrapBox2">

      <div class="subBox"></div>

      <div class="text">部分模糊</div>

    </div>

  </body>

</html>

可以看到，backdrop-filter 属性不必设置在一个图片元素上面，而是任何元素上面就行，这种方式我觉得更加灵活

总结

  • 如果只是模糊一张图片，那么直接用 filter 就可以实现。
  • 如果想要用一个模糊蒙层盖住html页面/图片的某一部分，那么使用 backdrop-filter。

当然，使用 backdrop-filter 也可以满足第一种场景。
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
    Tag :
相关文章
  • CSS中的overscroll-behavior属性介绍
    overscroll-behavior是 CSS 中的一个属性，它用于控制元素在发生滚动时，当滚动范围超出其边界时的行为。这个属性对于改善用户体验特别有用

  • CSS使用filter和backdrop-filter实现高斯模糊效果

    CSS使用filter和backdrop-filter实现高斯模糊效果
    今天接到一个需求是，使用高斯模糊的效果对一个页面进行模糊处理，正好借这个机会来整理一下 css3 中高斯模糊的两个 API API介绍 filter 说

  • css实现四角边框效果介绍

    css实现四角边框效果介绍
    css实现四角边框 html： 1 2 3 4 5 6 7 8 div class=box v-for=(item, index) in coldBaseInfo.stationModelList :key=index div class=boxleft img :src=photo[index] alt=Image / /div
  • CSS图片铺满div的实现方法
    第一种结构：图片是子元素 1 2 3 div img src=引入图片地址 alt= class=Img /div 方法一：img元素添加 object-fit:cover 1 2 3 4 5 6 7 8 9 div{ width: 500px; heigh

  • css边框修饰的实现

    css边框修饰的实现
    一、设置线条样式 通过border-style属性设置，可选择的一些属性如下： dotted：点线 dashed：虚线 solid：实线 double：双实线 效果如下： 二、设
  • CSS中:required和:optional伪类：增强表单字段的视觉
    在网页设计中，表单是用户与网站交互的重要元素之一。为了提升用户体验并引导用户正确填写表单，开发者需要清晰地标识出哪些字段是
  • 使用CSS3进行样式效果增强
    使用CSS3进行增强 滑过文字渐变 1 2 3 4 5 6 /* 这段代码实现了当鼠标滑过链接时的渐变效果 */ a { color: #007c21; transition: color .4s ease; } a:hover {

  • 利用CSS实现视差滚动和抖动效果

    利用CSS实现视差滚动和抖动效果
    前端的设计效果，越来越炫酷，而这些炫酷的效果，利用css3的动画效果和js就可以实现，简单的代码就能实现非常炫酷的效果。 原理：利用
  • CSS文本超出后隐藏并显示省略号及其他浏览器兼
    1、只显示一行文字后隐藏并省略 1 2 3 4 5 6 7 // 只显示一行文字后省略 .element { width: 300px; /* 需要设置一个固定宽度 */ white-space: nowrap; /* 强制

  • css3实现动态滚动播放列表功能

    css3实现动态滚动播放列表功能
    需要自动滚动循环播放的列表，使用纯CSS实现基础循环功能 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .messages animation-name carousel animation-timing-
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计