背景图像
background-image 设置、多背景叠加、渐变背景
背景图像
background-image 不仅支持图片——还支持渐变和多背景叠加。
学完本章你将： 掌握背景图设置、多背景叠加、渐变作为背景。
基本背景图
css
.hero {
background-image: url("hero.jpg");
height: 400px;
background-size: cover;
background-position: center;
}多背景叠加
css
/* 先写的在上层——用逗号分隔 */
.banner {
background-image:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* 遮罩层 */
url("banner.jpg"); /* 底图 */
background-size: cover;
}渐变背景
css
/* 线性渐变 */
.grad-1 { background-image: linear-gradient(to right, red, yellow); }
.grad-2 { background-image: linear-gradient(45deg, blue, purple); }
.grad-3 { background-image: linear-gradient(red, orange, yellow, green); }
/* 径向渐变 */
.grad-4 { background-image: radial-gradient(circle, red, yellow, green); }实战：Hero 区域
css
.hero {
background-image:
linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.2)),
url("hero.jpg");
background-size: cover;
background-position: center;
height: 500px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}