css的background-position的用法

background-position 是 CSS 中的一个属性，用于设置背景图像在元素中的起始位置。你可以通过像素值、百分比值或者关键字来定义这个属性。

以下是 background-position 的基本用法：

1. 使用像素值：
   你可以使用像素值来精确指定背景图像的起始位置。例如：

   div {  
     background-image: url('your-image.jpg');  
     background-position: 50px 100px;  
   }

   在这个例子中，背景图像将从元素的左侧 50 像素、顶部 100 像素的位置开始显示。
   2. 使用百分比值：
   百分比值是根据元素的宽度和高度来计算的。例如：

   div {  
     background-image: url('your-image.jpg');  
     background-position: 25% 75%;  
   }

   在这个例子中，背景图像将从元素的左侧 25%（宽度的 1/4）和顶部 75%（高度的 3/4）的位置开始显示。
   3. 使用关键字：
   你也可以使用关键字来定义背景位置，如 top、bottom、left、right、center。例如：

   div {  
     background-image: url('your-image.jpg');  
     background-position: right top;  
   }

   在这个例子中，背景图像将从元素的右上角开始显示。
   4. 混合使用：
   你还可以混合使用像素值、百分比值和关键字。例如：

   div {  
     background-image: url('your-image.jpg');  
     background-position: right 20px;  
   }

   在这个例子中，背景图像将从元素的右侧开始，距离顶部 20 像素的位置显示。
   5. 多个背景图像：
   当使用多个背景图像时，你可以为每个图像指定一个 background-position。这些值使用逗号分隔。例如：

   div {  
     background-image: url('image1.jpg'), url('image2.jpg');  
     background-position: left top, right bottom;  
   }

   在这个例子中，image1.jpg 将从元素的左上角开始显示，而 image2.jpg 将从元素的右下角开始显示。
   6. 与 background-repeat 结合使用：
   background-position 可以与 background-repeat 属性结合使用，以控制背景图像的重复方式及其位置。例如，如果你设置 background-repeat: no-repeat;，那么 background-position 将决定图像在元素中的确切位置。
   7. 简写属性：
   为了方便起见，你还可以使用 background 简写属性来同时设置多个背景相关的属性，包括 background-position。例如：

   div {  
     background: url('your-image.jpg') no-repeat right top;  
   }

   在这个例子中，我们同时设置了背景图像、不重复以及位置。