HTML5网页添加渐变背景教程

层叠在底层——那样多一层 DOM、可能干扰点击流、还容易因 z-index 或 position 出错。
线性渐变用 linear-gradient()，径向渐变用 radial-gradient()，两者都属于 CSS background-image 的合法值，可直接赋给 background 简写属性。

linear-gradient() 参数顺序决定方向，别只靠关键词

常见错误是写成 linear-gradient(top, #fff, #000) —— 这语法已废弃，现代浏览器不认 top 这种旧关键词。必须用标准语法：

• linear-gradient(to bottom, #fff, #000)（推荐，语义清晰）
• linear-gradient(180deg, #fff, #000)（等价，角度从正右 0deg 起算）
• 起始色和结束色之间可以加中间色标，比如 linear-gradient(to right, #f00, #ff0 50%, #00f)
• 别漏单位：角度必须带 deg，百分比用 %，不能写 50 或 50px

radial-gradient() 默认是椭圆，圆要显式声明 circle

写 radial-gradient(#fff, #000) 时，浏览器默认按元素宽高比例渲染椭圆渐变；如果希望是正圆（比如做中心发散光效），必须加形状关键字：

• radial-gradient(circle, #fff, #000)（圆心在默认位置：50% 50%）
• radial-gradient(circle at top right, #fff, #000)（圆心移到右上角）
• radial-gradient(ellipse 100px 50px at center, #fff, #000)（自定义椭圆尺寸）
• 多个色标支持位置偏移，如 #000 20% 表示黑色在 20% 半径处出现

静态页要兼容老浏览器？加回退色和前缀（但 IE10+ 其实不用）

纯 HTML5 静态页若需支持 IE9 及更早版本，得加单色回退：

body {
  background: #fff;
  background: linear-gradient(to bottom, #fff, #000);
}

现代项目基本不用加 -webkit- 前缀了——Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+ 全原生支持标准语法。唯一容易被忽略的是：渐变是 background-image，如果同时写了 background-color，后者会被覆盖；想叠加底色和渐变，得用逗号分隔多层背景：

body {
  background: #333, linear-gradient(45deg, #f00, #0f0);
  background-blend-mode: overlay;
}

本篇关于《HTML5网页添加渐变背景教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！