一、背景定位
/* 设置背景图片定位到元素左上角 */
.element {
background-image: url('image.jpg');
background-position: 0 0;
}
1.1 百分比定位
/* 设置背景图片定位到元素中心 */
.element {
background-image: url('image.jpg');
background-position: 50% 50%;
}
1.2 像素定位
像素定位提供了最精确的控制，但灵活性相对较低。
/* 设置背景图片定位到元素左上角 10px 20px 处 */
.element {
background-image: url('image.jpg');
background-position: 10px 20px;
}
二、背景大小
/* 设置背景图片大小为元素的宽度和高度 */
.element {
background-image: url('image.jpg');
background-size: cover;
}
2.1 cover
2.2 contain
2.3 百分比
/* 设置背景图片宽度为元素宽度的 50% */
.element {
background-image: url('image.jpg');
background-size: 50% auto;
}
三、背景重复
/* 设置背景图片在水平和垂直方向上重复 */
.element {
background-image: url('image.jpg');
background-repeat: repeat;
}
3.1 repeat
3.2 no-repeat
3.3 repeat-x
3.4 repeat-y
四、背景位置与大小结合
/* 设置背景图片定位到元素中心，大小为元素宽度的 50% */
.element {
background-image: url('image.jpg');
background-position: center center;
background-size: 50% auto;
}
五、响应式背景
/* 当屏幕宽度小于 600px 时，设置背景图片大小为元素宽度的 100% */
@media (max-width: 600px) {
.element {
background-size: 100% auto;
}
}