css如何将背景图居中

什么是背景图

背景图是指网页上用来作为背景的图片，可以是网页的整个背景或是某一区域的背景。通过设置 CSS 样式来控制背景图的位置和显示方式。

如何设置背景图

使用 background-image 属性

在 CSS 中，使用 background-image 属性来指定背景图的 URL，例如：

body {
  background-image: url("background.jpg");
}

这个例子将 body 元素的背景图设置为 background.jpg 图片。

控制背景图的重复方式

默认情况下，背景图会不断地重复铺满整个背景。如果要控制背景图的重复方式，可以使用 background-repeat 属性。

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

这个例子将背景图只重复一次，不会铺满整个背景。

设置背景图的位置

使用 background-position 属性可以指定背景图在背景中的位置。

/* 将背景图置于右上角位置 */
body {
  background-image: url("background.jpg");
  background-position: top right;
}
/* 将背景图向下移动20像素 */
body {
  background-image: url("background.jpg");
  background-position: center top 20px;
}

如何将背景图居中

将背景图居中需要使用 background-position 属性和 background-size 属性。

使用背景居中的简单方法

如果要将背景图居中，可以使用以下代码：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center center; /* 居中 */
  background-size: cover; /* 这个属性可以保持背景图的比例尺寸 */
}

这个例子将背景图居中，并设置背景图按比例尺寸显示。在这里，使用 background-position 属性将背景图居中。

用水平垂直居中的方法

如果要使用水平垂直居中的方法，可以参考以下方法：

html, body {
  height: 100%; /* 定义页面高度为100% */
}
body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

这个例子将 body 元素使用 flex 布局，通过 justify-content 和 align-items 属性来使背景图居中。同时定义 html 和 body 元素高度为100%。

使用伪元素

还可以使用伪元素来实现背景图居中的效果。

body::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("background.jpg") no-repeat center center fixed; /* 居中 */
  z-index: -1; /* 将背景置于最下层 */
}

这个例子使用伪元素 ::before，并使用 position: absolute 定位。利用 background 属性，将背景图设为居中。

总结

通过设置 background-position 和 background-size 属性，可以将背景图居中。使用简单的方法，可以快速地将背景图置于页面中央。