css背景图上移

CSS 是一种常用的前端技术，在网页设计中被广泛应用。其中，背景图上移是一项常见的需求，下面我们就详细介绍一下如何通过 CSS 实现背景图上移。

代码如下：
.background-image {
  
  background-image: url('example.jpg');
  
  background-position: center bottom;
  
  background-repeat: no-repeat;
  
  height: 500px;
}
.background-image:hover {
  
  background-position: center top;
}
 

上面代码中，我们首先创建了一个名为 background-image 的 CSS 类，它包含了一个背景图片，背景位置位于底部中央，不会重复，并设置了背景的高度为 500 像素。

然后，我们定义了一个悬停（:hover）状态的 CSS 类来实现背景图上移的效果，将背景的位置设置为顶部中央。此时，当鼠标悬停在该元素上时，就会触发背景图上移的动画效果。

在实际应用中，我们可以根据具体的需求对上述代码进行适当的调整，比如调整背景图的位置、大小等参数，以达到更好的视觉效果。