渐变：由浏览器生成的背景图像
无需图片文件，也能用颜色的连续变化装饰同一张活动卡片。
.poster {
background-color: #e8f4ef;
background-image: linear-gradient(
to right, #e8f4ef, #fff1d9
);
}结合左侧效果读代码
linear-gradient() 让浏览器生成一张颜色连续变化的图像，所以写在 background-image 中。
to right：从左向右；随后依次写起始色与结束色。
浅绿 #e8f4ef → 浅金 #fff1d9。下方示例分别比较属性、方向与图层。
概念对照：单色与渐变分别写在哪里？
下面三块区域大小相同，分别应用各自的代码。teal 是青绿色，gold 是金黄色。
单色：设置底色
.poster {
background-color: teal;
}一个颜色值，让整块区域显示同一种底色。
渐变：设置背景图像
.poster {
background-image:
linear-gradient(
to right, teal, gold
);
}浏览器生成渐变图像，不需要下载图片文件。
反例：属性放错了
.poster {
background-color:
linear-gradient(
to right, teal, gold
);
}这条声明无效。此例没有其他背景设置，因此背景透明，透出课件底色。
方向对照：to right、90deg 与 180deg
保持两端的颜色不变，只修改第一个参数。deg 表示角度单位“度”。
文字方向：向右
background-image:
linear-gradient(
to right, teal, gold
);从左到右，青绿逐渐变成金黄。
90deg：同样向右
background-image:
linear-gradient(
90deg, teal, gold
);与左边效果相同，换了一种方向写法。
180deg：向下
background-image:
linear-gradient(
180deg, teal, gold
);从上到下，青绿逐渐变成金黄。
属性对照：background 与 background-color
下面是两个独立示例，不是先运行左边再运行右边。两份代码都先设置相同渐变，只有最后一条声明不同。lightyellow 是浅黄色。
A：最后写 background
.poster {
background-image: linear-gradient(
to right, teal, gold
);
background: lightyellow;
}结果：只剩浅黄色。最后一条不仅设置底色，还把背景图像设成默认的 none，也就是“没有背景图像”。
B：最后写 background-color
.poster {
background-image: linear-gradient(
to right, teal, gold
);
background-color: lightyellow;
}结果：仍显示渐变。底色已经变为浅黄，但渐变被保留下来，覆盖在底色上方；不是底色设置失效了。
background 是把多项背景设置写在一起的“简写”。本例只写颜色时，未写的图像设置也会回到默认值；background-color 则只管底色，不改背景图像。
图层对照：底色为什么有时看不见？
两块区域的底色都是浅黄色。背景图像画在底色上方；比较渐变是否透明，底色能否透出来。
A：渐变完全不透明
.poster {
background-color: lightyellow;
background-image: linear-gradient(
to right, teal, gold
);
}青绿、金黄以及中间的过渡色都不透明。渐变铺满区域，看不到下面的浅黄色。
B：渐变从透明开始
.poster {
background-color: lightyellow;
background-image: linear-gradient(
to right, transparent, gold
);
}transparent 表示完全透明。左端透出浅黄底色，向右金黄色越来越不透明。
“看不见底色”不等于“没有底色”。本例没有其他背景图层，渐变的透明部分才会直接透出底色。
拓展示例：色标位置与多层背景
色标：指定颜色出现的位置
background-image: linear-gradient(
to right,
teal 0%, teal 50%, gold 100%
);“颜色＋位置”叫一个色标。这里 0% 是左端，100% 是右端；左半段保持青绿，到中点后才开始变为金黄。
多层：透明渐变叠在图片上
background-image:
linear-gradient(
to right, transparent, #fff1d9
),
url("demo/stage-background.svg");
background-repeat: no-repeat;
background-position: center;函数括号外的逗号分开两张背景图像：先写的渐变在上面，后写的舞台图在下面。左侧透明处露出的是舞台图，不是底色。
展开完整代码与运行演示
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>黄梅戏分享会</title>
<style>
.poster {
background-color: #e8f4ef;
background-image: linear-gradient(
to right, #e8f4ef, #fff1d9
);
}
.poster {
padding: 24px;
color: #183347;
}
</style>
</head>
<body>
<article class="poster">
<h1>黄梅戏分享会</h1>
<p>周三下午 · A208</p>
</article>
</body>
</html>