Web新手求助：如何实现指定颜色的全屏渐变背景？

一、渐变角度确定方法 #

打开Figma选中带渐变的元素，右侧属性面板的「渐变」选项会直接显示角度值。注意两者的角度计算逻辑差异：

• Figma的渐变角度从右上逆时针计算
• CSS linear-gradient的角度从右上顺时针计算，转换时用360deg - Figma角度即可。从你的设计稿截图来看，渐变方向为左上到右下，对应CSS角度为135deg。

二、修正后的完整代码 #

CSS代码

html, body {
  height: 100%;
  margin: 0;
}
body {
  background: linear-gradient(135deg, rgba(8, 32, 62, 0.5), rgba(85, 124, 147, 0.5));
}

HTML代码

<body></body>

三、关键细节说明 #

• 给html和body设置height: 100%并清除默认边距，确保渐变铺满整个视口
• 将颜色透明度的50%统一改为0.5，CSS中两种写法均支持，0.5更符合规范
• 135deg的角度与设计稿中左上到右下的渐变方向完全匹配

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