1. 设置背景图片（background-image）
使用 background-image 属性设置背景图片。
body {
background-image: url('your-image.jpg');
}
- url(‘your-image.jpg’'): 指定图片的路径。可以是相对路径或绝对路径。
- 设置多个背景图像
可以在同一元素上设置多个背景图像，它们会按顺序层叠显示。背景图像从第一个到最后一个顺序层叠，前面的图像会覆盖后面的图像。
.multiple-backgrounds {
background-image: url('image1.jpg'), url('image2.jpg');
}
//设置多张图片，可以给不同的图片设置指定的位置，这样就不会层叠显示
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
结合其他属性
.styled-background {
background-image: url('image.jpg');
background-repeat: no-repeat; /* 背景图像不重复 */
background-size: cover; /* 背景图像覆盖整个元素 */
background-position: center; /* 背景图像居中对齐 */
background-attachment: fixed; /* 背景图像固定在视口 */
}
2. 背景图片的尺寸（background-size）
使用 background-size 属性来控制背景图片的尺寸。常见值包括 cover 和 contain，也可以指定具体的宽度和高度。
常见值
- auto: 默认值，保持图像原始尺寸。
.element {
background-size: auto;
}
- cover: 图像会放大到覆盖整个背景区域，但可能会裁剪图像的某些部分以保持比例。
.element {
background-size: cover;
}
- contain: 图像会缩放以适应背景区域，同时保持图像比例。图像可能不会完全覆盖背景区域。
.element {
background-size: contain;
}
- 具体尺寸: 你可以指定图像的宽度和高度。例如，100px 50px 设置宽度为 100 像素，高度为 50 像素。
.element {
background-size: 100px 50px;
}
- 百分比: 使用百分比可以根据背景区域的尺寸来设置图像的宽度和高度。例如，50% 50% 会将图像宽度和高度设置为背景区域宽度和高度的 50%
.element {
background-size: 50% 50%;
}
3. 背景图片的位置（background-position）
使用 background-position 属性设置背景图片的位置。常见值包括 center, top left, bottom right 等，也可以使用具体的像素值或百分比。
- 可以结合使用水平和垂直位置，例如 left center, right bottom, 25% 75% 等。
.element {
background-position: left top;
}
- 使用百分比可以指定图像的位置。例如，50% 50% 表示图像的中心对齐于元素的中心。
.element {
background-position: 50% 50%;
}
- 使用像素或其他长度单位来精确设置位置。例如，10px 20px 表示距离元素左边缘 10 像素，距离顶部 20 像素。
.element {
background-position: 10px 20px;
}
4. 背景图片的重复（background-repeat）
使用 background-repeat 属性控制背景图片是否重复。常见值包括 repeat、no-repeat、repeat-x 和 repeat-y。
- repeat: 默认值，图像在水平和垂直方向上都重复。
.element {
background-repeat: repeat;
}
- repeat-x: 图像仅在水平方向上重复。
.element {
background-repeat: repeat-x;
}
- repeat-y: 图像仅在垂直方向上重复。
.element {
background-repeat: repeat-y;
}
- no-repeat: 图像不会重复，只显示一次。
.element {
background-repeat: no-repeat;
}
- space: 图像在背景区域内重复，间隔大小取决于背景区域和图像的尺寸。
.element {
background-repeat: space;
}
- round: 图像在背景区域内重复，同时调整图像大小以适应背景区域。
.element {
background-repeat: round;
}
5. 背景图片的附加属性（background-attachment，background-clip，background-origin）
可以使用以下属性来进一步控制背景图片的显示效果：
background-attachment：控制背景图像是否固定在视口中或随内容滚动。常见值包括 scroll 和 fixed。
- scroll: 背景图像会随着页面内容的滚动而滚动。这是默认值。
.element {
background-attachment: scroll;
}
- fixed: 背景图像固定在视口中，不随页面内容的滚动而移动。
.element {
background-attachment: fixed;
}
- local: 背景图像在元素内容区域内滚动，与元素的滚动条一起滚动。这在使用 overflow 属性时特别有用。
.element {
background-attachment: local;
}
background-clip：用于指定背景图像或背景颜色的绘制区域。它决定了背景内容的显示范围，即背景是否仅绘制在内容区、边框区或内边距区
- border-box: 背景图像或背景颜色绘制在元素的边框区域，包括内边距和内容区域。
.element {
background-clip: border-box;
}
- padding-box: 背景图像或背景颜色绘制在元素的内边距区域，但不包括边框区域。
.element {
background-clip: padding-box;
}
- content-box: 背景图像或背景颜色仅绘制在元素的内容区域，不包括内边距或边框区域。
.element {
background-clip: content-box;
}
background-origin：用于指定背景图像的起始位置，即背景图像如何定位在元素的背景区域。它决定了背景图像相对于元素的内边距、边框或内容区域的位置
border-box: 背景图像相对于元素的边框区域定位。
padding-box: 背景图像相对于元素的内边距区域定位。
content-box: 背景图像相对于元素的内容区域定位。
.element {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid black;
background: url('background.jpg') no-repeat;
background-origin: padding-box; /* 可以是 border-box、padding-box 或 content-box */
}
background-origin: padding-box; 表示背景图像相对于内边距区域定位，而不考虑边框区域。
