[分享]css中怎么更改背景图片位置

CSS是一门非常重要的前端技术，掌握它不仅能够提升页面的美观度，同时也能够提升用户的使用体验。其中，更改背景图片位置是一个常见但也很有用的技巧。我们可以通过CSS中的background属性来更改背景...

CSS是一门非常重要的前端技术，掌握它不仅能够提升页面的美观度，同时也能够提升用户的使用体验。其中，更改背景图片位置是一个常见但也很有用的技巧。
我们可以通过CSS中的background-position属性来更改背景图片的位置。具体实现方法如下：
首先，在HTML中添加一个div元素，然后给它一个背景图片：

<div class="bg"></div>

<style>
  .bg {
    background-image: url("image.jpg");
    height: 500px;
    width: 500px;
  }
</style> 

上述代码中，我们给div元素添加了一个背景图片（image.jpg），并设置了它的高度和宽度为500px。接下来，我们可以使用background-position属性来更改背景图片的位置。在CSS中，background-position属性有两个值，分别表示背景图片的水平和垂直位置。
例如，如果我们想让背景图片向左上角移动100px：

<style>
  .bg {
    background-image: url("image.jpg");
    height: 500px;
    width: 500px;
    background-position: -100px -100px;
  }
</style> 

上述代码中，我们使用了负值来表示背景图片向左上角移动了100px。其中，第一个值-100px表示背景图片向左移动了100px，第二个值-100px表示背景图片向上移动了100px。
需要注意的是，在设置background-position属性时，我们可以只设置一个值，此时表示水平方向的位置；也可以同时设置两个值，第一个值表示水平方向的位置，第二个值表示垂直方向的位置。
除了使用负值更改背景图片位置外，我们还可以使用百分比。例如，如果我们想让背景图片水平方向向右移动50%：

<style>
  .bg {
    background-image: url("image.jpg");
    height: 500px;
    width: 500px;
    background-position: 50% 0;
  }
</style> 

上述代码中，我们使用了50%来表示背景图片向右移动了50%。其中，第一个值50%表示背景图片水平方向向右移动了50%，第二个值0表示垂直方向的位置不变。
综上所述，通过background-position属性可以方便地更改背景图片的位置，从而实现更加丰富有趣的页面效果。