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

导航

侧边栏

最新评论

广树管理员

2025-04-15 22:53

@小彦：所以文本转成json啊，然后递归渲染，数据都在json里了还不好办

小彦

2025-04-15 22:49

@广树：数据取出不是难点，难的是你的卡片组件，是vue组件来的（例如），但是日志内容是全文字数据，怎么让一个日志内容里还能渲染卡片组件呢？因为vue的组件必须是写在 template里的，不能说日志里有vue的代码他就能渲染出来

广树管理员

2025-04-15 22:44

@小彦：真要硬做也不是不可以，服务器先对文本做预处理比如md转json或者html转json或者干脆数据库就存json，然后从json拿到所有涉及到的番剧id再从数据库里拿到id填充回json里。接下来前端只用针对这个json做递归渲染就行了。

小彦

2025-04-15 22:40

@广树：果然是这样，一般的思路也是这样。有个难题是，如果要求卡片和日志的文字混排呢？例如用自定义 markdown 语法，如 #card# 之类的和文字混排，能做到么

广树管理员

2025-04-15 22:14

@小彦：这个啊，首先数据库里要有个番剧表，然后把番剧和文章做关联就有了数据。前端的话做一个通用组件复用渲染就行了。

攻略中

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