Question

我正在尝试使背景成为渐变色。但是，当我这样做时，结果却很奇怪，一堆行...看起来并不正确。但是，当它不占用整个背景时，例如width：500px和height：500px，看起来不错。我真的不明白这里发生了什么。

body {
  background-image: linear-gradient(red, 10%, pink);
}

Answer 1

很可能是“色带”，这是显示器不支持大量颜色以至于无法创建完美渐变的问题。在正确校准的显示器上看起来可能不错。

线性渐变也不如基于贝塞尔曲线的渐变来使用“缓动”来使颜色之间更平滑地融合。

具有更多点且具有缓和曲线的线性渐变的示例：

linear-gradient(
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.738) 19%,
  hsla(0, 0%, 0%, 0.541) 34%,
  hsla(0, 0%, 0%, 0.382) 47%,
  hsla(0, 0%, 0%, 0.278) 56.5%,
  hsla(0, 0%, 0%, 0.194) 65%,
  hsla(0, 0%, 0%, 0.126) 73%,
  hsla(0, 0%, 0%, 0.075) 80.2%,
  hsla(0, 0%, 0%, 0.042) 86.1%,
  hsla(0, 0%, 0%, 0.021) 91%,
  hsla(0, 0%, 0%, 0.008) 95.2%,
  hsla(0, 0%, 0%, 0.002) 98.2%,
  hsla(0, 0%, 0%, 0) 100%
);

线性渐变背景问题

1 个答案: