CSS原生毛玻璃效果 | backdrop-filter

导航

侧边栏

最新评论

广树管理员

2026-07-11 12:19

@666：因为avif格式到24年才几乎被主流浏览器覆盖。webp的缺点是不支持hdr

666

2026-07-11 12:17

avif见的不多，webp倒是不少

广树管理员

2026-07-11 11:50

@Ringnee：就是所有关卡clear

广树管理员

2026-07-11 11:50

@Aki：据我所知三星的HDR方案应该是安卓机较为通用的方案，也不排除其他手机特立独行。

Ringnee

2026-07-09 09:57

我前两天想玩一下健身环发现switch打开也没电了。节奏天国的玩到最后是什么意思？还有攻略关卡吗

攻略中

暂无评分

NS节奏天国奇迹之星

2026年7月08日 20时 ~ 攻略中

已累计游玩6天

《节奏天国：奇迹之星》是一款轻松又充满创意的音乐节奏游戏，玩家只需跟随音乐节拍按下按键，就能完成跳跃、敲击空罐、制作料理等各种有趣的小挑战。游戏延续了《节奏天国》系列简单易上手、节奏感强、画风幽默的特点，让玩家在一个个短小精巧的关卡中感受音乐与反应力结合的乐趣，适合喜欢节奏游戏和轻松休闲玩法的玩家体验。

暂无评分

PS5传颂之物：循白之证

2026年5月31日 19时 ~ 攻略中

已累计游玩1个月14天

《传颂之物：循白之证》是 AQUAPLUS 开发、Shiravune 发行的《传颂之物》系列动作 RPG。故事发生在大国“大和”恢复和平之后：奥修特尔、御雷、宗近、修娘等人击退敌国阿瓦什兰的侵略，本应迎来安宁，但各地却陆续出现看似毫无关联的怪异现象，并逐渐指向同一个源头；随着三条线索彼此重叠，众人再次踏上旅程，而旅途尽...

CSS原生毛玻璃效果 | backdrop-filter

2018-07-04 11:24:12

CSS/HTML

虽然网上有很多伪CSS毛玻璃的方法，但是局限性很大。其实新的浏览器多多少少有开始支持原生的毛玻璃CSS属性。只是进展还是有点慢，普及率并不高，但可以一试效果。

代码：

.className {
    /* Safari for macOS & iOS */
    -webkit-backdrop-filter: blur(5px); 

    /* Google Chrome */
    backdrop-filter: blur(5px); 

    /* 设置背景半透明黑色 */
    background: rgba(0, 0, 0, 0.8); 
}

给自己的网站试了下：

目前的兼容性情况（2018.7.4）：

苹果和微软都开始支持这个属性了，Chrome虽然是红色，但其实也能开启。

在Chrome地址栏输入：chrome://flags#enable-experimental-web-platform-features

开启实验性功能即可。

在MDN中也介绍了除了毛玻璃以外的其他属性：

/* Keyword value */
backdrop-filter: none;

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> values */
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%);

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

具体可以参考：https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

总的来说还是挺不错的属性，希望早日普及！

#CSS3