CSS背景定位的参数
背景图像可以通过CSS设置定位来安置在给定元素的不同位置,在此过程中,CSS规定了一些关于背景定位的参数:
1. background-position:设置背景图像的位置,可以使用像素值或百分比。
例如:
p {
background-image: url("bg.jpg");
background-position: 50% 50%;
/*定位背景图像的水平和垂直位置*/
}
2. background-repeat:设置背景图像是否重复,默认为重复。
例如:
p {
background-image: url("bg.jpg");
background-repeat: no-repeat;
/*背景图像不重复*/
}
3. background-attachment:设置背景图像是否随着页面滚动而滚动。
例如:
p {
background-image: url("bg.jpg");
background-attachment: fixed;
/*背景图像固定不动*/
}
4. background-origin:设置背景图像的起始位置。
例如:
p {
background-image: url("bg.jpg");
background-origin: content-box;
/*背景图像从内容区域的左上角开始*/
}
5. background-size:设置背景图像的大小。
例如:
p {
background-image: url("bg.jpg");
background-size: cover;
/*背景图像自适应容器大小*/
}
总之,CSS提供给我们很多参数来控制背景图像的各个方面,学会这些参数对于美化网站界面是非常有帮助的。