开发基于Adobe XD组件的页面。由于AdobeXD不允许导出CSS，所以我一直在手工编码每个元素的CSS属性。我试图找出下面截图的CSS等价物是什么。模糊矩形，顶部为非模糊文本：
模糊矩形XD设置：
基于“填充”和“81%"，获取HEX值，将其转换为RGB，然后编写background-color: rgba(54,93,62,0.81)是很容易的，但我不知道“背景模糊”设置的等效CSS是什么。
background-color: rgba(54,93,62,0.81)
mrphzbgm1#
我也有同样的问题，我可以这样翻译：
背景颜色：三原色（54、93、62）模糊：16亮度：15效果不透明度：34%
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是一样的。
ct3nt3jp2#
它是：
-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不支持此功能-因此目前您可能需要导出内置模糊效果的平面化图像。
检查浏览器兼容性https://www.caniuse.com/?search=backdrop-filter最简单的是：
backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.5);
请注意，背景色必须为50%、20%或10%透明，才能看到效果。Firefox在这方面仍然有所欠缺。
8yoxcaq73#
您是否尝试过了解XD的设计规范功能？Adobe XD design specs可让您和您的合作者查看从Adobe XD发布的设计规范，从而使您能够检查和评论流程、度量和样式。1.点击XD右上方的分享按钮，点击“发布设计规范”
1.在“导出目的”下，选择“Web”（或“iOS”或“Android”）
3条答案
按热度按时间mrphzbgm1#
我也有同样的问题，我可以这样翻译：
背景颜色：三原色（54、93、62）
模糊：16
亮度：15
效果不透明度：34%
模糊仍以像素为单位。
XD的亮度是-50到+50。我会说它从-50%开始，从100%上升到150%。
XD中的效果不透明度是0%，没有颜色和100%的全色。所以这和设置背景色的不透明度从0到1是一样的。
ct3nt3jp2#
它是：
演示：https://codepen.io/igcorreia/pen/YJeQgb
**请务必检查浏览器兼容性。**截至2019年初，Chrome或Firefox不支持此功能-因此目前您可能需要导出内置模糊效果的平面化图像。
更新日期：2021年9月
检查浏览器兼容性https://www.caniuse.com/?search=backdrop-filter
最简单的是：
请注意，背景色必须为50%、20%或10%透明，才能看到效果。
Firefox在这方面仍然有所欠缺。
8yoxcaq73#
您是否尝试过了解XD的设计规范功能？Adobe XD design specs可让您和您的合作者查看从Adobe XD发布的设计规范，从而使您能够检查和评论流程、度量和样式。
1.点击XD右上方的分享按钮，点击“发布设计规范”
1.在“导出目的”下，选择“Web”（或“iOS”或“Android”）