CSS 等同于 Adob​​e XD 的“背景模糊”功能？

Question

开发基于 Adob​​e XD comp 的页面。

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

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

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

模糊矩形 XD 设置：

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

Answer 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。我想说它从 -50% 开始，从 100% 上升到 150%。

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

Answer 2

这是：

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

演示： https: //codepen.io/igcorreia/pen/YJeQgb

确保检查浏览器兼容性。截至 2019 年初，Chrome 或 Firefox 不支持此功能- 因此目前您可能需要导出内置模糊效果的扁平图像。

2021 年 9 月更新

检查浏览器兼容性https://www.caniuse.com/?search=backdrop-filter

最简单的是：

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

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

Firefox 在这方面仍然落后。

Answer 3

您是否尝试过查看 XD 的设计规格功能？Adobe XD 设计规范允许您和您的协作者查看从 Adob​​e XD 发布的设计规范，从而使您能够检查流程、测量和样式并对其进行评论。

1. 点击XD右上角的分享按钮，然后点击“发布设计规范”

2. 在“导出为”下，选择“Web”（或“iOS”或“Android”）

3. 转到生成的链接，然后选择画板上的模糊对象。您将能够在右侧“规格”面板中看到以下过滤器属性的具体值：

   • 模糊
   • 亮度
   • 不透明度