backdrop-filter影响子元素定位

最新推荐文章于 2024-07-30 15:41:25 发布
最新推荐文章于 2024-07-30 15:41:25 发布
阅读量312 收藏
点赞数
文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaojinnaozhier/article/details/132646854
版权

父元素使用了css属性backdrop-filter后，子元素的定位是基于父元素的。
哪个大佬知道原理的，可否指点一二
上面写了个html文件demo 可以下载看一下

鼠标移入中间div之前
在这里插入图片描述
鼠标移入中间div之后
在这里插入图片描述

嚼尽脑汁ↇ
关注
详解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中的百分比计算吗，overflow:hidden一定会生效吗
小硅壳的博客
08-02 177
元素的宽、高、内外边距、偏移量取值为百分比时，它们的计算基数取决于包含块元素，不是包裹其的父元素。行高和字体的百分比计算的坑如何理解呢。定位元素的父盒子一定要是非static定位的父盒子吗。父级盒子的overflow:hiddern什么情况无法截断子盒子
父子组件之间互相影响backdrop-filter的css效果
最新发布
Chinese_wawa_summer的博客
07-30 372
UI现在很爱使用backdrop-filter这个设计，以前没发现啥问题，开始做地图以后，面板后面挂了一张地图，父子组件之间关于这个效果的影响就格外明显了。当父组件是用来backdrop-filter的设置，子组件也想使用的时候，效果会受到影响，我遇到的是子组件不生效，不知道会不会出现别的情况。2.在子组件上使用使用伪元素，将backdrop-filter的毛玻璃效果使用到伪元素上，这样子组件的背景就不会受到影响。第二个解决方案，我在使用的过程中出现了，子组件的所有内容都被毛玻璃覆盖。
css backdrop-filter和border-radius的坑
weixin_45727272的博客
12-29 975
backdrop-filter是css中毛玻璃效果的属性，但是当他和position：fixed一起使用的时候，会改变css固定定位的相对位置点，固定定位原本是相对于浏览器左上角0,0border-radius和transform-translate使用的时候很离谱，要保证宽高为偶数而且不能为百分比，否则会导致字体渲染模糊
backdrop-filter css的性能杀手
weixin_43561423的博客
05-15 1787
使用毛玻璃效果时，滚动滚动条时页面卡顿、空白
css中filter属性设置后导致页面定位失效
Bright2017的博客
10-12 813
原因：当在标签中使用了 filter 属性后（body { filter: grayscale(1);）， filter 就会生成一个新的包含块，其位置大小和所在标签一样，然后 fixed 元素就会根据这个包含块进行定位，导致定位出现问题。问题：app上设置css的filter属性导致定位失效。解决方式：设置到html上即可。
css 中backdrop-filter使用
qwguo
04-17 1072
是一个强大的 CSS 属性，通过它可以为页面背景添加各种图形效果。然而，在使用时需要注意其性能影响和浏览器兼容性，并根据实际需求进行适当的应用和优化。通过不断学习和实践，我们可以更好地掌握这一属性，并将其应用于实际项目中，创造出更加美观和引人入胜的界面效果。它允许我们改变元素背后内容的视觉效果，从而创造出新颖、引人注目的界面设计。通过应用不同的滤镜函数，我们可以为页面背景添加模糊、亮度调整、颜色变换等效果。元素背后的内容将被应用模糊效果，同时元素的背景被设置为半透明的白色。
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
Material-Backdrop-Android：材质背景
02-03
implementation 'com.github.kishan2612:Material-Backdrop-Android:v1.1.0' } 在布局中包含小部件 <com.evolve.backdroplibrary.BackdropContainer android:layout_width="match_parent" android:layout_...
傻傻分不清楚？深入探讨 filter 与 backdrop-filter 的异同
奇舞周刊
01-05 3258
本文将深入探讨在 CSS 中两个非常类似的属性 -- filter 和 backdrop-filter。它们都能完成某些滤镜功能，但是它们肯定也存在差异。那么，为什么在 CSS 中有了 f...
使用 filter 置灰网站需要注意！
文摘资讯
12-07 435
最近在做一个置灰网站的需求，我跟大部分网站一样使用了 CSS 的 filter 滤镜功能，但是事情并没有原本的那么简单，如果使用不当，还会引发线上事故。位置问题代码如下：<!DOCTYPE html> <html lang="en"> <head> <style> .container { /* filter: graysca...
CSS3-transform-transform影响子级的固定定位
Zerofishcoding的博客
11-15 4058
在进行限制范围拖拽代码编写时，父级为固定定位，子级为固定定位，给父级加transform，html和css代码分别如下：
CSS：filter（滤镜）修饰父元素背景，影响子元素问题解决
九日的博客
04-30 8268
问题： 父元素作为背景，设置了filter的高斯模糊效果，影响到了子元素的文字↓↓↓↓↓↓↓↓↓↓ <div class="cell"> <p>嗷嗷嗷嗷嗷嗷嗷嗷啊</p> </div> /******************************/ <style> .cell{ width...
css filter属性和position冲突
weixin_51679573的博客
12-01 592
踩坑，CSS3 filter属性与postion属性冲突
backdrop-filter filter
qq_42451776的博客
08-31 710
文章目录filterbackdrop-filter filter 用于图片模糊 img { filter: blur(10px); } backdrop-filter 用于背景模糊,不会影响元素上面的内容 .box { width: 600px; height: 400px; border: 1px solid #f5f5f5; backdrop-filter: blur(2px); border-radiu
backdrop-filter
04-05
The `backdrop-filter` CSS property allows you to apply visual effects to the area behind an element. This is often used to create a frosted glass effect or blur the background of an element. The `backdrop-filter` property takes a filter function as its value, such as `blur()`, `brightness()`, `contrast()`, `grayscale()`, `hue-rotate()`, `invert()`, `opacity()`, `saturate()`, `sepia()`, and `drop-shadow()`. Here's an example of how to use `backdrop-filter` to create a frosted glass effect: ``` .container { backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; padding: 20px; } ``` In this example, the `backdrop-filter` property is set to `blur(10px)`, which blurs the area behind the element by 10 pixels. The `background-color` property is set to a semi-transparent white color to create the frosted glass effect. The `border-radius` property rounds the corners of the element, and the `padding` property adds some space between the content and the border.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值