2.1 属性 background-position
CSS中的background-position属性用于设置元素中背景图片的初始位置。
这个属性允许你精准定义背景图像在元素内的位置。background-position
可以用来精确调整背景图像的显示，从而创建更复杂的设计。
background-position 语法
属性 background-position 接受两个值，分别表示背景图像的水平和垂直位置：
background-position: 水平位置 垂直位置;
如果只指定一个值，默认情况下第二个值为 center。
水平和垂直位置的可能值：
-
关键字：
left: 左对齐center: 居中right: 右对齐top: 顶部对齐bottom: 底部对齐
-
百分比值：
- 例如，50% 50% 将图像定位在中心
- 百分比值是相对于元素的大小，而不是图像的大小
-
像素值：
- 例如，10px 20px 将图像从左边缘向右偏移10像素，从顶部边缘向下偏移20像素
-
值的组合：
- 可以结合关键字和百分比值，例如，left 50%
2.2 关键字
关键字：
left,center,right: 水平对齐top,center,bottom: 垂直对齐
关键字使用示例
图像定位在左上角：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: left top; /* 图像定位在左上角 */
}
图像定位在中心：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: center center; /* 图像定位在中心 */
}
图像定位在右下角：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: right bottom; /* 图像定位在右下角 */
}
2.3 百分比
百分比值指图像相对于元素尺寸的位置。
百分比使用示例
图像定位在中心：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 50% 50%; /* 图像定位在中心 */
}
图像定位在左上角：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 0% 0%; /* 图像定位在左上角 */
}
图像定位在右下角：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 100% 100%; /* 图像定位在右下角 */
}
2.4 绝对单位 (px, em, rem)
使用像素或其它绝对单位的值可以精确定位图像。
图像定位在中心：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 10px 20px; /* 图像从左上角右移10像素，下移20像素 */
}
div {
background-image: url('path/to/image.jpg');
background-position: 2em 3em; /* 图像右移2em，下移3em */
}
2.5 值的组合
你可以结合关键字和绝对单位来创建更精确的定位。
值的组合：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: left 20px top 10px; /* 图像从左上角右移20像素，下移10像素 */
}
GO TO FULL VERSION