用HTML代码实现网页渐变背景效果-html教程-PHP中文网

linear-gradient()必须作为background或background-image的值使用，不能用于background-color；方向参数必填且语法严格，多色停靠点需显式标注位置，否则易导致渐变失效或视觉偏差。

用html代码实现网页渐变背景效果

用 `background` 和 `linear-gradient()` 直接写 CSS 就行

不需要 JS，也不用额外图片，纯 CSS 的 linear-gradient() 是最轻量、兼容性最好的方案。现代浏览器（Chrome 10+、Firefox 16+、Safari 5.1+、Edge 12+）都支持，连 iOS Safari 也能跑。

关键点是把渐变当「颜色」用——它本质是 background 的一个取值，不是独立属性：

body {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}

注意：linear-gradient() 必须写在 background 或 background-image 里，单独写 background-color: linear-gradient(...) 会失效。

方向参数写错会导致渐变「不按预期流动」

linear-gradient() 第一个参数控制方向，常见写法有两类，混用容易出问题：

to bottom right：关键词写法，to 必须带，bottom right 之间有空格
135deg：角度写法，0deg 是正右，90deg 是正下，135deg 就是「右下」

错误示例：linear-gradient(bottom right, ...)（漏掉 to）或 linear-gradient(135, ...)（缺 deg 单位）都会让整个声明被忽略，退回到默认背景色。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

多色停靠点没设好，颜色会「硬切」或「溢出」

两个颜色时浏览器自动均匀过渡；但加到 3 个以上，就得手动指定位置，否则可能某段过渡太长、某段太短：

background: linear-gradient(
  to right,
  #3498db,
  #2ecc71 70%,  /* 绿色从 70% 位置开始 */
  #e74c3c      /* 红色默认占满剩余 */
);

常见陷阱：

百分比总和超 100%，比如 #a 30%, #b 60%, #c 50% —— 后面的会覆盖前面的停靠逻辑
用像素值（如 100px）在响应式页面里容易错位，优先用百分比或关键词（from/to）
透明色写成 transparent 没问题，但别写 rgba(0,0,0,0) —— 某些旧 Android 浏览器解析异常

想让渐变「动起来」得加 `background-size` 和 `animation`

纯 linear-gradient() 是静态的。要实现流动效果，核心是：让渐变区域比容器大，再平移背景位置。

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
<p>@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}</p>

重点：