在使用背景图片时，经常会遇到背景图片所在的位置不是我们想要的，那如何设置背景图片的位置呢？以下就来介绍CSS中背景图片位置 background-position 的用法。
在背景图片的背景图片位置属性中，background-position是用来控制元素背景图片的位置。它接受三种值：
关键词:如top、right、bottom、left、center
长度值；如px、em、rem等
百分值：%
一般最常用的值或者说最了解的值是关键词和长度值，百分比使用最多的是0%、50%和100%。
在背景图片位置属性中，属性值一般有2个，第一个代表横向位置，就是X轴；第二个代表纵向位置，即Y轴，使用两个属性值定义背景图片的起始位置，如果两个方向的起始位置相同，则可以使用一个值。
其中部分属性值的含义如下所述：
top: 背景图片的初始位置为元素顶部
center: 背景图片的起始位置为元素中部
left: 背景图片的起始位置为元素左侧
right: 背景图片的起始位置为元素右侧
bottom: 背景图片的起始位置为元素底部
举例：设置背景图片的位置为左边、底部，同时定义了背景图片不平铺。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{width: 200px;height: 200px;border:1px solid #ccc;background: url(img/gift2x.png) no-repeat left bottom;}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图：
以上是 background-position 的简单介绍，希望对你有帮助！
Atas ialah kandungan terperinci CSS中背景图片位置 background-position 的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Penggunaan fungsi ppf dalam Python
Pengenalan kepada rangka kerja yang digunakan oleh vscode
Apple pay tidak boleh menambah kad
Bagaimana untuk menulis kelawar skrip kelompok
Apakah data yang biasanya disimpan oleh redis cache?
Cara menggunakan fungsi baris
Apa yang perlu dilakukan jika pemasangan pemacu kad bunyi gagal
Apa itu Weidian
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
