CSS是否等效于Adobe XD的“背景模糊”功能？

Question

基于Adobe XD comp开发页面。

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

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

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

模糊的矩形XD设置：

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

Answer 1

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

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

1. 在“导出为”下，选择“网络”（或“ iOS”或“ Android”）

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年初，此日期为not supported in Chrome or Firefox-因此，您现在可能需要导出带有模糊效果的扁平图像。

Answer 3

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

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