css 如何设置背景图片定位

在CSS中设置背景图片的位置，可以使用 background-position 属性。这个属性用于指定背景图像在元素背景区域中的起始位置。它可以接受多种类型的值，包括关键字、长度单位（像素、百分比等）以及组合值。

各种用法示例：

1. 关键字定位：

   • 将背景图片放在元素的左上角：

     background-position: top left;
     

   • 将背景图片放在右下角：

     background-position: bottom right;
     

2. 像素定位：

   • 将背景图片从左上角向右偏移10像素，向下偏移20像素：

     background-position: 10px 20px;
     

3. 百分比定位：

   • 将背景图片的左上角相对于元素背景区域的中心对齐：

     background-position: 50% 50%;
     

   • 将背景图片的左边缘位于元素宽度的25%，上边缘位于高度的75%处：

     background-position: 25% 75%;
     

4. 多背景定位：

   • 对于具有多个背景图片的情况，可以按照图片出现的顺序逐个设置它们的位置：

     background-image: url(image1.png), url(image2.png);
     background-position: left top, right bottom;
     

5. 负值定位：

   • 负值可以将背景图片的一部分置于元素边界之外，比如裁剪背景图片显示特定区域：

     background-position: -10px -20px;