背景 background
background-color/image/repeat/position/size 全部背景属性
背景 background
background 系列属性控制元素的背景——颜色、图片、位置、重复方式。
学完本章你将： 掌握 background-color/image/repeat/position/size。
背景颜色
css
.box { background-color: #4CAF50; }
/* 简写 */
.box { background: #4CAF50; }背景图片
css
.hero {
background-image: url("bg.jpg");
background-repeat: no-repeat; /* 不重复 */
background-position: center; /* 居中 */
background-size: cover; /* 覆盖整个容器 */
}背景属性大全
css
.box {
background-color: #f0f0f0;
background-image: url("pattern.png");
background-repeat: repeat-x; /* no-repeat repeat-x repeat-y */
background-position: right top; /* 水平 垂直 */
background-size: contain; /* cover/contain/具体值 */
background-attachment: fixed; /* scroll/fixed */
}简写 background
css
/* 顺序不重要，但推荐：color image repeat position/size attachment */
.box {
background: #f0f0f0 url("bg.jpg") no-repeat center/cover fixed;
}
/* 纯色背景 */
.box { background: #333; }
/* 渐变背景 */
.box { background: linear-gradient(to right, red, blue); }