CSS 如何使用 CSS 移动背景图片

在本文中，我们将介绍如何使用 CSS 移动背景图片。背景图片是网页设计中常用的元素之一，通过移动背景图片，可以实现一些有趣的效果。

阅读更多：CSS 教程

什么是背景图片？

在网页设计中，背景图片是指位于 HTML 元素后面的图片。背景图片可以应用于页面的整个背景，也可以应用于特定的区域或元素。通过 CSS，我们可以控制背景图片的大小、位置、重复方式等。

移动背景图片的方式

要移动背景图片，我们可以使用以下几种方式：

1. 使用 background-position 属性

div {
  width: 200px;
  height: 200px;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

在上面的例子中，我们设置了一个 div 元素，并将背景图片应用于该元素。通过使用 background-position 属性，我们可以控制背景图片的位置。在这个例子中，我们将背景图片的位置设置为居中。

2. 使用百分比值

div {
  width: 200px;
  height: 200px;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

@keyframes movingBackground {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

div:hover {
  animation: movingBackground 5s infinite;
}

在这个例子中，我们使用百分比值来设置背景图片的位置。通过定义一个动画（@keyframes），我们可以在元素的伪类（:hover）中应用这个动画。当鼠标悬停在 div 元素上时，背景图片将会在5秒内从左上角移动到右下角。

3. 使用背景图片的偏移量

div {
  width: 200px;
  height: 200px;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: 0 0;
}

div:hover {
  background-position: 50px 50px;
}

在这个例子中，我们使用 background-position 属性的值来设置背景图片的偏移量。当鼠标悬停在 div 元素上时，背景图片将会向右下角偏移50个像素。

示例说明

现在，让我们通过一个示例来说明如何移动背景图片。

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-image: url('background.jpg');
      background-repeat: no-repeat;
      background-position: 0 0;
    }

    div:hover {
      background-position: 50px 50px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

在上面的示例中，我们创建了一个 div 元素，并将背景图片应用于该元素。当鼠标悬停在 div 元素上时，背景图片将会向右下角偏移50个像素。