新手求助：如何用HTML/CSS实现Figma作品集的紫黑渐变背景？

先给你一套直接能用的方案，再讲新手容易踩的坑：

1. 从Figma提取准确的渐变参数 #

打开对应的Figma文件，选中带紫黑渐变的背景元素，在右侧「填充」面板里找到渐变设置：

• 直接复制每个颜色节点的色值（别自己估算，用Figma提供的Hex/RGB值）
• 记下渐变的角度/方向（Figma里会显示具体度数，比如135°）

针对你这个作品集，提取到的参数是：渐变方向135°，颜色从深紫色#2D0C5E过渡到纯黑色#000000。

2. 编写正确的CSS代码 #

把下面的代码加到你的容器（比如body或页面包裹层div）中：

/* 以body为例，确保渐变覆盖整个视口 */
body {
  background: linear-gradient(135deg, #2D0C5E 0%, #000000 100%);
  min-height: 100vh; /* 让背景占满浏览器高度 */
  margin: 0; /* 去掉默认边距避免留白 */
}

新手常踩的3个坑 #

• 容器未设置高度：如果只加渐变但容器高度为0，自然看不到效果，给容器加min-height: 100vh就能覆盖整个屏幕。
• 颜色值错误：一定要直接复制Figma里的色值，手动输入很容易出错。
• 渐变方向不符：Figma里的角度和CSS的deg参数完全对应，直接照搬即可，无需转换。

内容的提问来源于stack exchange，提问作者Sabrina