css backdrop-filter和border-radius的坑

最新推荐文章于 2024-08-29 08:36:38 发布
最新推荐文章于 2024-08-29 08:36:38 发布
阅读量1k 收藏 1
点赞数 4
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45727272/article/details/128477238
版权

 backdrop-filter是css中毛玻璃效果的属性，但是当他和position：fixed一起使用的时候，会改变css固定定位的相对位置点，固定定位原本是相对于浏览器左上角0,0

border-radius和transform-translate使用的时候很离谱，要保证宽高为偶数而且不能为百分比，否则会导致字体渲染模糊

 

青青子衿~~
关注
CSS backdrop-filter 滤镜 毛玻璃效果
qq_45289153的博客
09-16 333
css毛玻璃效果
CSS backdrop-filter 实现毛玻璃效果 无需定位裁剪图片
LadyLotus的博客
08-08 993
利用伪类+CSS实现毛玻璃效果，无需将图片进行叠层或裁减。backdrop-filter是一种CSS属性，可以为一个元素后面区域添加图形效果（如模糊或颜色偏移）。不兼容于IE。
小程序图片使用filter后，设置border-radius失效
qq_41248310的博客
11-09 1167
在设置image的父元素使用border-radius、overflow:hidden属性
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属性导致fixed定位失效
最新发布
qq_45937484的博客
08-29 940
backdrop-filter属性导致fixed定位失效
详解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:
border:none解决input框加上border-radius后出现的内部阴影
qq_42372534的博客
04-26 486
outline:none, border:none
backdrop-filter影响子元素定位
jiaojinnaozhier的博客
09-03 359
父元素使用了css属性backdrop-filter后，子元素的定位是基于父元素的。上面写了个html文件demo 可以下载看一下。哪个大佬知道原理的，可否指点一二
backdrop-filter高斯模糊
zhaohanqq的博客
12-16 1715
backdrop-filter是在Filter Level2提出来的。这是一个实验技术，其取值和filter Level1中filter属性的属性值一样，包括： blur() url brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia() 效果如下： ...
使用backdrop-filter实现elementui官网的模糊滤镜效果的和毛玻璃效果
动感超人的博客
11-25 2059
backdrop-filter属性filter属性二者区别二者支持的滤镜对比(其实filter可以用的,backdrop-filter都可以用) 我们重点关注下面几个属性 为什么设置background-size和background-image :设置背景图片大小,这个不用多说设置背景图片的大小所以我们如果只设置这二个值会发生什么?为了便于观看,我将换为了一张具体图片,便于查看 初次的时候你可能看到这个效果是不是觉得这个点点是什么,我们放大看看 可以看到,只不过背景被替换为了一个一个
css中filter属性和backdrop-filter的应用与区别详解
11-19
### CSS中`filter`属性和`backdrop-filter`的应用与区别详解 #### 一、`filter`属性 在CSS3中，`filter`属性提供了一种简单而强大的方式来为HTML元素应用各种视觉效果。这些效果包括但不限于模糊、亮度调整、对比...
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 `...
纯css实现毛玻璃特效
paidaboluo的博客
09-02 370
纯css实现毛玻璃特效
css 中backdrop-filter使用
qwguo
04-17 1203
是一个强大的 CSS 属性，通过它可以为页面背景添加各种图形效果。然而，在使用时需要注意其性能影响和浏览器兼容性，并根据实际需求进行适当的应用和优化。通过不断学习和实践，我们可以更好地掌握这一属性，并将其应用于实际项目中，创造出更加美观和引人入胜的界面效果。它允许我们改变元素背后内容的视觉效果，从而创造出新颖、引人注目的界面设计。通过应用不同的滤镜函数，我们可以为页面背景添加模糊、亮度调整、颜色变换等效果。元素背后的内容将被应用模糊效果，同时元素的背景被设置为半透明的白色。
backdrop-filter css的性能杀手
weixin_43561423的博客
05-15 1989
使用毛玻璃效果时，滚动滚动条时页面卡顿、空白
安卓微信浏览器加border-radius出现模糊(锯齿)
转接遇到爱的专栏
12-08 6427
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>border-radius出现模糊(锯齿)</title> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" conten
position:fixed 在filter下失效！
CSU_Zipple的博客
01-14 1686
如果父元素中存在filter属性，子元素使用position:fixed 将会相对于父元素定位。 ps: 目前应该解决不了 相关链接：https://github.com/chokcoco/iCSS/issues/24
css实现模糊镜效果及渐变字体和text-shadow冲突解决方案
05-24 1140
今天主要介绍2个css特效，一个是css实现模糊镜效果，就是一个返回顶部标签，或者固底标签，网页滑动的时候看到网页滑动过的部分是模糊的。类型模糊镜子的效果，看哪里哪里背景是模糊的。还有就是解决一个渐变字体或者图片字体添加text-shadow，阴影会在文字顶部的问题。
谷歌浏览器里部分字体变模糊的问题。
wjlhanhan的博客
12-22 1977
之前也说过这个问题，在一篇文字上阅读短文时发现有点吃力，但是看其他的网站就有瞬间变清晰了的感觉，仔细对比原来是字体在谷歌浏览器里变模糊了，很奇怪，实在不清楚是什么原因。 没模糊时是这样的（电脑上截图那个颜色选择器就没了，就只好照了个照片） 模糊后是这样的 根据我一段一段删除CSS后才发现删除了这句css后backdrop-filter: blur(3px);会变得正常不在模糊，以前解决时是删除的position: sticky； top: 0；这两句，你说position: sticky； top: 0；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值