css - CSS 相当于 Adobe XD 的“背景模糊”功能？

Question

开发基于 Adobe XD 组合的页面。

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

我试图弄清楚以下屏幕截图的 CSS 等价物是什么。

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

模糊矩形 XD 设置：

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

score 6 · Accepted Answer

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

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 相同。

score 5 · Accepted Answer

这是：

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

确保检查浏览器兼容性。截至 2019 年初，Chrome 或 Firefox 不支持此功能- 所以现在您可能需要导出带有内置模糊功能的平面图像。

2021 年 9 月更新

最简单的是：

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

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

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

score 1 · Accepted Answer

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