【问题标题】：CSS equivalent to Adobe XD's "Background Blur" feature?CSS 相当于 Adobe XD“背景模糊”功能？
【发布时间】：2018-09-21 18:08:16
【问题描述】：

基于 Adobe XD 组合开发页面。

由于 Adobe XD 不允许您导出 CSS，我一直在手动编码每个元素的 CSS 属性。

我正在尝试找出以下屏幕截图的 CSS 等效项。

顶部带有未模糊文本的模糊矩形：

模糊矩形 XD 设置：

基于“填充”和“81%”，很容易获取 HEX 值，将其转换为 RGB，然后写入 background-color: rgba(54,93,62,0.81)，但我不知道“背景”的等效 CSS 是什么模糊”设置。

【问题讨论】：

【解决方案1】：

我有同样的问题，我会这样翻译：

XD：
背景颜色：RGB(54, 93, 62)
模糊：16
亮度：15
效果不透明度：34%

CSS：

background-color: rgba(54, 93, 62, 0.34);
backdrop-filter: blur(16px) brightness(115%);

模糊停留在像素中。

XD 中的亮度为 -50 到 +50。我会说它从 100% 变为 -50% 到 -50%，所以它与 50% 到 150% 的区间相同。

XD 中的效果不透明度为 0%（无色）和 100% 全色。所以它与将背景颜色的不透明度从 0 设置为 1 相同。

【讨论】：

【解决方案2】：

它是：

   -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);

确保检查浏览器兼容性。截至 2019 年初，这是not supported in Chrome or Firefox - 所以现在您可能需要导出一个内置模糊的平面图像。

2021 年 9 月更新

最简单的是：

backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);

请注意，背景颜色必须为 50%、20% 或 10% 透明才能看到效果。

Firefox 在这个效果上仍然落后。

【讨论】：

【解决方案3】：

您是否尝试过查看 XD 的设计规格功能？ Adobe XD design specs 让您和您的合作者查看从 Adobe XD 发布的设计规范，让您能够检查和评论流程、度量和样式。

【讨论】：