使用backdrop-filter部分场景的替代效果

最新推荐文章于 2024-07-30 15:41:25 发布

iwantppc

最新推荐文章于 2024-07-30 15:41:25 发布

阅读量842

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/aefefafaf/article/details/125461417

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

近期项目使用到了backdrop-filter，但在部分安卓机型有兼容问题，没有效果，而filter又不能达到效果，经过半天的思考，使用box-shadow阴影效果试一下，居然勉强达到设计效果。

filter与backdrop-filter的差异

1：filter不仅仅作用于当前元素，后代元素也会继承这个属性

2：backdrop-filter 是使透过该层的底部元素模糊化

来看看backdrop-filter浏览器支持情况

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iwantppc

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS backdrop-filter 滤镜毛玻璃效果

qq_45289153的博客

09-16

307

css毛玻璃效果

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

PrimaryColor

08-24

2656

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

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

处理安卓机不支持backdrop-filter毛玻璃效果样式

yongyafang123的博客

04-01

2513

安卓机 webview backdrop-filter毛玻璃效果样式

父子组件之间互相影响backdrop-filter的css效果

热门推荐

肥晨开发的学习之路

12-26

1万+

CSS 滤镜 : backdrop-filter backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。滤镜：名称：方法案例：效果： blur() 模糊 : blur(5px) brightness() 亮度 : brightness(1.4); contrast() 对比度 :...

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

05-19

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

背景毛玻璃效果 css,CSS backdrop-filter实现背景毛玻璃效果

weixin_33400830的博客

08-03

1342

CSS背景滤镜backdrop-filter有人说backdrop-filter和filter的语法类似。错！不是类似，是一模一样，如出一辙，毫无二致。看下面的对比表：backdrop-filter语法filter语法/* 关键字值 */backdrop-filter: none;/* URL方式外链SVG filter */backdrop-filter: url(zxx.svg#filter)...

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

11-19

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

CSS backdrop-filter 实现毛玻璃效果无需定位裁剪图片

LadyLotus的博客

08-08

967

利用伪类+CSS实现毛玻璃效果，无需将图片进行叠层或裁减。backdrop-filter是一种CSS属性，可以为一个元素后面区域添加图形效果（如模糊或颜色偏移）。不兼容于IE。

详解filter与fixed冲突的原因及解决方案

11-21

问题描述当在 body 中使用了 filter 滤镜属性的时候，会导致 fixed 元素定位发生错误，即不再相对 viewport 进行定位，而是相对整个网页（ body 元素）进行定位。 <html> <head> <title>css filter issue</title> <style> body { height: 600px; background: red; filter: grayscale(1); /* 关键代码 */ } .fixed { color:

CSS backdrop-filter 和filter两种高斯模糊的区别

Obito_TXP的博客

09-06

1241

1. dropback-filter: 用法：直接作用于当前元素，当前元素及其父元素，或其背景都会被高斯模糊看到浏览器兼容列表详情，我以为webkit内核浏览器就能兼容此属性，可经测试以下情况并不支持：搜狗浏览器极速模式 360浏览器极速模式，火狐浏览器也是不支持的，有以上要求的，就要慎用了 /* 关键字值 */ backdrop-filter: none; /* URL方式外链SVG filter */ backdrop-filter: url(zxx.svg#filter); /* .

118.浏览器支持和修复Safari浏览器的Flexbox漏洞

分享学习网络的点点滴滴

07-03

433

这段 CSS 代码是用来解决 flexbox 的 row-gap 和 column-gap 属性在某些浏览器中不被支持的问题。它使用了一个类名 .no-flexbox-gap，然后为这个类名下的一些元素设置了间距，以达到类似 row-gap 和 column-gap 的效果。另外，它还使用了媒体查询来在不同的屏幕尺寸下改变间距的大小。● 例如，现在我们在导航添加一个很新的CSS属性，这个会让背景变得模糊。● 但是例如老版本的safari浏览器不支持，我们需要加另外的参数。

CSS中backdrop-filter与fliter属性

qq_64071349的博客

07-30

1159

z-index属性用来设置堆叠顺序（不过在这里不用也行，因为在这个例子里只有。属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。的所有元素，为了看到效果，必须使元素或其背景至少部分透明。二、来理解backdrop-filter属性的例子。为省事，我直接修改w3school上的内容。filter将元素中的内容变得模糊。介绍mdn文档中对这两个属性的介绍。三、来理解filter属性的例子...

css新滤镜：backdrop-filter，确定不试一下与filter的区别？

QUX轻博客

09-23

2469

还记得毛玻璃效果吗？不知道你是否用filter属性设置过毛玻璃效果，其实实现这个效果的最佳方案应该使用backdrop-filter，因为filter导致模糊四周露...

backdrop-filter 和filter 写出高斯模糊效果以及两者区别

weixin_30430169的博客

03-16

782

http://www.w3cplus.com/css3/advanced-css-filters.html； backdrop-filter：blur(10px);只支持ios端；只作用于当前元素；适用场景：为背景添加模糊效果；如果目标元素内包裹着其他内容则应用filter属性；（不支持安卓，效果不明显） filter：blur(10px); 兼容...

CSS3 backdrop-filter() 实现背景毛玻璃效果，区别于 blur()

学习笔记

08-10

1万+

CSS3 backdrop-filter() 实现背景毛玻璃效果，区别于 blur() MDN相关说明 https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter 一个可以实现背景毛玻璃效果的 CSS 属性平常使用的 filter 区别于 backdrop-filter filter 是模糊内容 backdrop-filt...

backdrop-filter怎么使用

06-03

`backdrop-filter` 是一种 CSS 属性，它可以用来模糊或变暗元素后面的内容，类似于一个背景过滤器。它可以用于创建视觉效果，例如模糊背景或创建高斯模糊效果。以下是 `backdrop-filter` 的使用方法： 1. 首先，需要为元素设置一个背景图像或颜色。 2. 然后，通过设置 `backdrop-filter` 属性来创建视觉效果。可以使用以下值来设置 `backdrop-filter`： - `blur()`：用于模糊元素后面的内容。 - `brightness()`：用于调整元素后面的内容的亮度。 - `contrast()`：用于调整元素后面的内容的对比度。 - `grayscale()`：用于将元素后面的内容转换为灰度。 - `hue-rotate()`：用于将元素后面的内容旋转一定的色相。 - `invert()`：用于反转元素后面的内容。 - `opacity()`：用于设置元素后面的内容的不透明度。 - `saturate()`：用于调整元素后面的内容的饱和度。 - `sepia()`：用于将元素后面的内容转换为棕褐色。 3. 最后，将 `backdrop-filter` 属性应用于要创建视觉效果的元素上。例如，以下 CSS 代码将在一个具有背景颜色的元素上创建一个模糊效果： ```css .element { background-color: #ffffff; backdrop-filter: blur(5px); } ```