CSS左上到右下渐变背景失效求助：问题排查及原因分析

嘿，我来帮你搞定这个渐变背景失效的问题！先看你参考的那个SCSS代码，转换成普通CSS的时候很容易踩几个小坑，我给你拆解清楚：

为什么你的CSS代码没生效？ #

• SCSS变量没转成实际颜色值：原示例里的$purp和$gold是SCSS专属的变量，普通CSS根本不认识这些符号，直接用的话浏览器会直接忽略这条背景样式，这大概率是你失效的核心原因！
• 可能忽略了html元素的高度设置：虽然你给body加了100vh，但有些浏览器里如果html元素没有占满视口高度，body的渐变可能会显示不全（不过这个是辅助优化点）
• 背景属性的冗余值不影响，但没必要：原SCSS里的100% no-repeat其实是多余的，因为线性渐变默认就会占满容器且不重复，但这不是导致失效的原因

正确的CSS实现代码 #

把SCSS变量替换成实际的颜色值，再补全基础的视口高度设置，就能得到和示例一样的效果：

html, body {
  margin: 0;
  height: 100vh;
}
body {
  display: flex;
  background: linear-gradient(to bottom right, #542437 0%, #CDB380 100%);
}

额外小提示 #

• to bottom right就是你要的左上到右下的渐变方向，和示例效果完全一致
• 给html也设置height:100vh是为了兼容部分浏览器，确保body能完全覆盖整个视口
• 去掉100% no-repeat是因为线性渐变默认就具备这个特性，简化代码也不影响效果

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