深入理解CSS背景定位

一、什么是CSS背景定位

CSS背景定位是一种控制背景位置的方法。背景通常是位于元素内容的下面，它默认铺满整个元素。但是，在某些情况下，我们可能需要控制背景位置，比如在一个文章列表中，我们需要为每个文章设置不同的背景图并显示在对应的位置上，那么这时候，CSS背景定位来就能派上用场。

二、如何使用CSS背景定位

在CSS中，我们可以使用background-position属性来控制背景图像的位置。

background-position: x-axis y-axis;

其中，x-axis和y-axis都有以下的属性值：

• left
• center
• right
• top
• bottom
• length
• %

其中，length可以是像素或者其他长度单位，比如em、rem。%指的是父元素的百分比。

三、CSS背景定位的用处

1. 背景组合

利用CSS背景定位，可以轻松实现背景组合的效果。比如，现在有一个需求，需要把一个div划分为两个部分，左边显示一张图片，右边显示一段文字。

  <div class="bg-combination">
    <p>这是一段文字</p>
  </div>

  .bg-combination {
    background-image: url(image.png), linear-gradient(to left, #ffffff 50%, #000000 50%);
    background-position: left top, right top;
    background-size: 150px auto, calc(100% - 150px) auto;
    background-repeat: no-repeat;
  }
  .bg-combination p {
    margin-left: 170px;
  }

在此例子中，我们先设置了两种背景，一张图片和一个线性渐变，然后使用background-position来设置每个背景定位的位置，接着设置了每种背景的大小，并且让它们不重复。最后再调整p元素的margin-left，使其刚好放在右边的背景中。

2. 图形定位

通过CSS背景定位，可以把多张图片合并成一个雪碧图，通过background-position调整显示不同的位置，从而实现图形定位的效果，可以减少请求次数，提高页面的加载速度。

  .icon {
    background-image: url(sprite.png);
    background-position: -32px -64px;
    width: 16px;
    height: 16px;
  }

在此例子中，我们设置了一个雪碧图，通过background-position来调整显示的位置，最后再把元素的宽高设定为原图的大小。

3. 背景动画

通过CSS背景定位和CSS动画结合使用，可以实现一些简单的背景动画效果。

  .bg_animation {
    background-image: url(bg1.jpg), url(bg2.jpg);
    background-position: 0 0, 0 -200px;
    background-size: cover;
    animation: slide 5s infinite alternate;
  }
  @keyframes slide {
    from { background-position: 0 0, 0 -200px; }
    to { background-position: 0 -200px, 0 0; }
  }

在此例子中，我们设置了两张背景图片，分别偏移200px的垂直位置，最后通过CSS动画来控制背景图片的位置发生变化，从而实现背景滑动的效果。

四、结语

通过CSS背景定位，我们可以控制背景位置，实现很多酷炫的效果，比如背景组合、图形定位、背景动画等。它是CSS中很实用的一种方法，可以帮助我们减少请求次数，提高页面的加载速度。