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

CSS是前端开发必不可少的技能之一。其中，改变背景图片位置也是常见的操作之一。接下来，我们将介绍如何利用CSS来改变背景图片的位置。首先，我们需要在HTML文件中设置一个div元素，并在这个元素的样式...

CSS是前端开发必不可少的技能之一。其中，改变背景图片位置也是常见的操作之一。接下来，我们将介绍如何利用CSS来改变背景图片的位置。
首先，我们需要在HTML文件中设置一个div元素，并在这个元素的样式中设置背景图片。代码如下：

<div class="container">
  <p>这是一个拥有背景图片的div元素。</p>
</div>

<style>
.container {
  background-image: url("background.jpg");
  background-size: cover;
  height: 400px;
  width: 100%;
}
</style> 

上述代码中，我们设置了一个class为container的div元素，并设置了此元素的背景图片为名为background.jpg的图片。同时，我们为此元素设置了一个100%的宽度和400px的高度，让它占据一定的区域。background-size设置为cover则是让背景图片完全铺满这个区域。
接下来，我们要修改这个背景图片的位置。可以使用background-position属性来实现。background-position属性接受两个值，分别代表水平和垂直方向上的位置。我们可以使用像素或百分比来表示位置。
例如，我们将图片在水平方向上向右移动100像素，在垂直方向上向下移动50像素。代码如下：

.container {
  background-image: url("background.jpg");
  background-size: cover;
  background-position: 100px 50px;
  height: 400px;
  width: 100%;
} 

上述代码中，我们在container的样式中添加了background-position属性，并将其设置为100px 50px。这样，背景图片就会相应地向右移动100像素，向下移动50像素。
除了像素，我们也可以使用百分比来表示位置。例如，我们将背景图片在水平方向上向左移动50%。代码如下：

.container {
  background-image: url("background.jpg");
  background-size: cover;
  background-position: -50% 0;
  height: 400px;
  width: 100%;
} 

上述代码中，我们在background-position属性中将水平方向的值设置为-50%。这样，背景图片就会相应地向左移动50%。
综上所述，利用CSS来改变背景图片位置非常简单，只需要利用background-position属性即可。通过设置水平和垂直方向上的值，我们可以让背景图片在容器中相应地移动。