css实现透明滤镜高斯模糊效果 backdrop-filter

shimh_凉茶

已于 2022-10-31 15:45:02 修改

阅读量689

点赞数 1

分类专栏： css html 文章标签： 1024程序员节 css

于 2022-10-24 15:08:24 首次发布

本文链接：https://blog.csdn.net/weixin_34403976/article/details/127493079

版权

css 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

实现高斯模糊核心属性是 backdrop-filter
抓紧试试吧！

div {
	backdrop-filter: saturate(50%) blur(8px);
    background: rgba(255,255,255,.7);
}

使用下面这个背景能实现点阵效果

div {
	backdrop-filter: saturate(50%) blur(8px);
    background-image: radial-gradient(transparent 1px,var(--bg-color) 1px);
}

抓紧玩一玩吧！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

shimh_凉茶

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现透明滤镜高斯模糊效果 backdrop-filter

css 实现 div 透明高斯模糊效果 backdrop-filter
复制链接

扫一扫

专栏目录

css 弹窗遮罩层设置模糊效果 backdrop-filter（滤镜）

PrimaryColor

08-24

2545

弹窗的遮罩层，如果直接给filter：blur，模糊效果不会生效。代码： background-color:rgba(0,0,0,0.5); backdrop-filter:blur(2px);

web端css实现高斯模糊：filter/backdrop-filter

reffrselom的博客

12-20

2124

客户要求实现前端实现毛玻璃效果：即PS中的高斯模糊效果翻了翻资料发现还真是能实现，甚至连正片叠底效果都能实现，不得不感慨css3的日益强大。 1. dropback-filter: 用法：直接作用于当前元素，当前元素及其父元素，或其背景都会被高斯模糊 /* SVG 过滤器 */ backdrop-filter: url(commonfilters.svg#filter); /* <fil...

参与评论您还未登录，请先登录后发表或查看评论

CSS实现高斯模糊效果

最新发布

cwdWendy的博客

06-11

243

开发过程中一个css需求涉及知识盲区，特记录一下。需要的效果（背景透明且模糊）

CSS 高级属性之 radial-gradient 径向渐变详解

青颜的天空的博客

03-08

3258

https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient 径向渐变：默认的形状是椭圆，至少得有两个颜色值。形状：ellipse 椭圆（默认），circle（圆）

css 使用blur，实现背景色高斯模糊，但不影响背景上的内容

蓝胖子的博客

04-06

2692

css 使用blur，实现背景色高斯模糊，但不影响背景上的内容

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

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

03-08

4989

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

用css写背景模糊的三种情况

weixin_73529240的博客

11-02

8083

今天一下午什么都没干，只搞了这个模糊效果和动画还有一个发光按钮的效果，不过当真正攻克难关的时候还是感觉很开心的，一定一定要把基础知识掌握牢固（比如overflow和after的两个引号），其实最难的往往还是最基础的知识，因为东西就这么多，就摆在这里，再多的花样也逃不出这些基础知识的范围，花活谁都会整，有基本才是硬道理。关关难过关关过，前路漫漫亦灿灿嘛。

css中filter属性和backdrop-filter的应用与区别详解

11-19

在这个例子中，我们使用了`backdrop-filter`来模糊背景，并且为了让效果可见，设置了背景颜色为半透明。 #### 三、`filter`与`backdrop-filter`的区别 - **作用范围**：`filter`属性应用于元素自身及其所有后代...

react-backdrop-filter:React Backdrop Filter是使实验背景滤镜与画布配合使用的快速简便方法

05-19

React背景过滤器 React Backdrop Filter是一种向您的应用程序添加漂亮的背景滤镜的快速简便的方法。... import BackdropFilter from "react-backdrop-filter" ; render ( ) { return ( < div cla

CSS-filter-Demo:微信小程序 CSS filter（滤镜）的使用示例

05-08

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。分类 none 默认值，没有效果。 blur() 高斯模糊 brightness() 亮度 contrast() 对比度 drop-shadow() 阴影 grayscale() 灰度 hue-rotate() 色相旋转...

Android毛玻璃效果--高斯模糊源码.zip

04-12

在Android开发中，"毛玻璃效果"是一种流行的设计趋势，它通过模糊背景图像来创造半透明、朦胧的视觉效果，从而提升用户界面的美观度和深度感。这种效果通常被称为"Blurry"或"Material Design的Backdrop Filter"。在...

backdrop-filter影响子元素定位

09-03

backdrop-filter影响子元素定位 html文件

CSS常用函数补充(var、clac、blur、gradient)

小洋人最happy的专栏

12-05

1025

CSS中常用函数补充(var、calc、blur、gradient)，简介及使用演示

CSS实现背景图片高斯模糊效果

apple_54470279的博客

04-28

7093

高斯模糊亦称为毛玻璃效果，这里提供一种可行的背景图片高斯模糊效果的解决方案，适用于大部分情况。其原理是通过 ::before 伪元素制作一个遮罩层的效果。

用CSS实现一个类似Element-plus的文字虚化效果

zhang_hai_cheng的博客

01-29

820

我们可能看到过这样的一个效果：页面中的内容滚动穿过某个固定元素时，会产生虚化的视觉效果，能看出文字的轮廓，但是却无法看到具体的内容，给人一种哎呦？不错哦的感觉。我们来拿element-plus官网作为案例，看看它是如何实现的，创造力是无穷的，就看谁的花样多！

用原生css实现高斯模糊、黑白等滤镜效果

angran79676765的专栏

05-28

360

—引导— 在CSS3中，有一个强大的属性，那就是filter属性，filter顾名思义就是“滤镜”的意思，用filter属性可以让图片无需PS处理就达到一些简单的显示效果。 —定义和使用— filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。默认值 none 继承 none 动画支持...

HTML中的背景设置（下）

m0_52660785的博客

07-26

811

对上篇文章的补充，主要是渐变背景和滤镜的用法。

实现模糊遮罩效果除了backdrop-filter还可以用什么

07-14

除了 `backdrop-filter`，你还可以使用其他方法来实现模糊遮罩效果。以下是几种常见的实现方式： 1. 使用 CSS `filter` 属性：可以使用 `blur` 值来给元素添加模糊效果。例如： ```css .element { filter: blur(5px); } ``` 这将给元素添加一个 5 像素的模糊效果。你可以根据需要调整模糊程度。 2. 使用 SVG 滤镜：使用 SVG 可以创建自定义的滤镜效果，包括模糊效果。你可以在 SVG 文件中定义一个滤镜并将其应用于 HTML 元素。例如： ```css .element { filter: url(#blur-filter); } ``` 然后在 SVG 文件中定义滤镜： ```html <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> <defs> <filter id="blur-filter"> <feGaussianBlur stdDeviation="5" /> </filter> </defs> </svg> ``` 这将给元素添加一个 5 像素的模糊效果。 3. 使用背景图片和 CSS `::after` 伪元素：你可以为元素添加一个背景图片，并使用 `::after` 伪元素覆盖在上面，然后通过设置透明度和模糊效果来实现遮罩效果。例如： ```css .element { position: relative; background-image: url('your-image.jpg'); } .element::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */ backdrop-filter: blur(5px); } ``` 这将给元素添加一个带有背景图片的半透明黑色遮罩，并应用 5 像素的模糊效果。这些是一些常见的实现模糊遮罩效果的方法，你可以根据具体需求选择适合的方法。