CSS如何设置图片位置
1. 使用background-position属性
在CSS中，可以使用background-position属性来设置背景图片的位置。这个属性通常用于设置元素的背景图像的起始位置。
下面是background-position属性的参考语法：
background-position: x轴位置 y轴位置;其中，x轴位置和y轴位置可以使用具体的数值、百分比或者关键字来表示。
关键字
background-position属性可以使用以下关键字来指定背景图片的位置：
left：将背景图像的左边缘与元素的左边缘对齐。
right：将背景图像的右边缘与元素的右边缘对齐。
top：将背景图像的顶部边缘与元素的顶部边缘对齐。
bottom：将背景图像的底部边缘与元素的底部边缘对齐。
center：将背景图像的中心点与元素的中心点对齐。
接下来是一些示例：
background-position: left top;这个示例将背景图片的左上角与元素的左上角对齐。
background-position: right bottom;这个示例将背景图片的右下角与元素的右下角对齐。
具体数值和百分比
除了关键字，background-position属性还可以使用具体的数值和百分比来指定背景图片的位置。
数值：使用具体的数值来指定背景图片的位置。数值可以是正数、负数或者0。数值是相对于元素的左上角来计算的。
百分比：使用百分比来指定背景图片的位置。百分比是相对于元素的宽度和高度来计算的。
以下是一些示例：
background-position: 100px 50px;这个示例将背景图片的左上角与元素的左上角偏离100像素和50像素。
background-position: 50% 50%;这个示例将背景图片的中心点与元素的中心点对齐。
2. 使用background-position属性和关键字
除了上面提到的具体数值和百分比，background-position属性还可以与关键字一起使用，以便更精确地定位背景图片。
以下是一些示例：
background-position: right top;这个示例将背景图片的右上角与元素的右上角对齐。
background-position: center 30%;这个示例将背景图片的水平中心点与元素的水平中心点对齐，垂直位置偏离元素顶部30%的高度。
3. 使用background-position-x和background-position-y属性
CSS3引入了background-position-x和background-position-y属性，用于独立控制背景图片的水平和垂直位置。
以下是background-position-x和background-position-y属性的参考语法：
background-position-x: x轴位置;
background-position-y: y轴位置;
其中，x轴位置和y轴位置可以使用具体的数值、百分比或者关键字来表示，与background-position属性相同。
以下是一些示例：
background-position-x: right;
background-position-y: 50%;
这个示例将背景图片的右边缘与元素的右边缘对齐，垂直位置与元素的垂直中心点对齐。