[分享]css中如何让背景图居中显示

在 CSS 中，背景图的显示位置默认是在背景容器的左上角，而很多时候我们需要让背景图居中显示。下面，我们就来看看如何实现这个效果。 首先，我们可以使用 background 属性来指定背景图的位置。这...

在 CSS 中，背景图的显示位置默认是在背景容器的左上角，而很多时候我们需要让背景图居中显示。下面，我们就来看看如何实现这个效果。 首先，我们可以使用 background-position 属性来指定背景图的位置。这个属性有两个值，分别表示横向和纵向的位置。如果我们想让背景图在水平方向上居中，可以将该值设置为 center；如果想要在垂直方向上居中，可以将该值设置为 center。如果想同时在两个方向上居中，可以使用 center center 来设置。 例如，下面的代码将背景图在水平方向上居中，垂直方向上沿着顶部边框对齐：

.bg {
  background-image: url('background.jpg');
  background-position: center top;
} 

然而，这种方式并不能让背景图完美地居中显示，因为它只会对背景图的位置进行调整，而并不会对它的大小进行调整。 因此，我们还需要使用 background-size 属性，来设置背景图的大小。这个属性有两个值，分别表示宽度和高度。如果我们想让背景图在宽度上充满整个容器，可以将该值设置为 100%；如果想让其在高度上充满整个容器，可以将该值设置为 100%。如果想让其同时在两个方向上充满整个容器，可以使用 100% 100% 来设置。 例如，下面的代码将背景图在两个方向上充满整个容器，并且居中显示：

.bg {
  background-image: url('background.jpg');
  background-size: 100%;
  background-position: center center;
} 

好了，现在你已经知道了如何将背景图居中显示了。快来尝试一下吧！