Figma如何处理复杂背景？答案

【问题标题】：How to deal with complex backgrounds from Figma?Figma如何处理复杂背景？
【发布时间】：2023-02-04 12:15:15
【问题描述】：

所以，我得到了一个 Figma 资源和将它移动到网站的任务。我遇到了一个麻烦：我的 figma 背景非常复杂。不同的线条、形状等包含在背景中。那么哪种处理方式最好呢？我是否应该将所有这些元素组合成单个元素并将其作为单个背景图像插入？

我需要用不同的线条移动这个背景，这些线条在 figma 中定义为单独的元素到网站。

【问题讨论】：

IMO，您可以将数字与每个框分组（数字位置对于相应的框是绝对的），这些框对于具有圆形背景的父级是绝对的。顶部盒子应该放在中间并移动到顶部，而底部盒子应该放在中间并移动到底部（基本上从中间原点翻译）
@Damzaky，我想我提出的问题不太好。我的意思是如何处理背景线（图像左侧的圆圈和图像角上具有高不透明度的蓝色球体）。我是否应该将所有这些项目组合成一个背景图像并将所有 UI 元素放入其中，或者不应该 =) 但谢谢回答！

【解决方案1】：

将设计概念/模型分解为图像、HTML 和 CSS 层是一个微妙的过程，尤其是在设计非常丰富的情况下。

我建议学习这些教程，以便您找出将模型转换为专业且优化的 HTML5 网页的最佳策略：

现在，话虽如此，我将如何处理它：

这一般渐变背景应该使用 CSS 呈现。
这圆圈、点和水平线来自圆圈，应导出为 SVG - 或 - 透明 PNG。将该 PNG 图像放置在 CSS 背景上。为此，我建议检查这个Stack Overflow question。
这数字, 是具有平面颜色的文本，应该使用浮动 div、CSS 和 WOFF 字体来实现。我不会将每个数字导出为单独的图像，因为这是 90 年代的老方法，当时 HTML5 和 CSS 功能还很原始。但这取决于你。
具有透明背景的圆角矩形可以用 DIVS 和 CSS 呈现模糊它们背后的任何东西。西里尔文字位于 DIVS 内。检查这个Stack Overflow question。

我希望这有帮助！

【讨论】：