毛玻璃效果

本文介绍了在 Butterfly 主题网站中为卡片实现毛玻璃效果的方法与问题解决过程。文章首先指出，为所有卡片统一设置 backdrop-filter: blur(7px) 可使导航栏模糊程度一致，但在暗色模式下会因缺乏基础颜色导致卡片与背景糊成一片。作者曾尝试通过 @media (prefers-color-scheme: light) 限制仅在亮色模式生效，但这并非根本解决方案。后来意外发现主题作者为导航栏设计的十六位色（如 #FFFFFFB3 和 #121212CC），通过为亮色和暗色模式分别设置带透明度通道的背景颜色，再统一保留 blur(7px)，即可实现不干扰网站扁平化设计的毛玻璃效果，且暗色模式用户也能正常使用。最后，文章给出了在 Butterfly 主题配置文件中引入对应 CSS 文件以及通过 Cloudflare Pages 完成部署的示例代码。