css 如何设置背景图片定位

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

各种用法示例：

1. 关键字定位：

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

     background-position: top left;
     

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

     background-position: bottom right;
     

   • 像素定位：

     
     （图片来源网络，侵删）
     • 将背景图片从左上角向右偏移10像素，向下偏移20像素：

       background-position: 10px 20px;
       

     • 百分比定位：

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

         background-position: 50% 50%;
         

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

         background-position: 25% 75%;
         

       • 多背景定位：

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

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

         • 负值定位：

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

             background-position: -10px -20px;