HOWTO · CSS
在 CSS 中居中背景图像
使用 background-position 使 CSS 背景图像居中，并使用 background-size 控制其大小。
本页内容
要让用作 CSS 背景的图像居中，请设置 background-position: center。如果希望图像铺满容器，可以添加 background-size: cover；它会保持图像的宽高比，但可能裁切边缘。如果只想显示一张图而不是平铺图案，请设置 background-repeat: no-repeat。这些属性各司其职：位置属性负责放置图像，尺寸属性负责缩放图像，重复属性则决定图像是否平铺。
在 CSS 中使用背景属性使背景图像居中
将背景设置在需要显示它的元素上。在此示例中，.hero 的高度至少与视口一样高。请将 photo.jpg 替换为图像的路径。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.hero {
min-height: 100vh;
background-image: url("photo.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<main class="hero"></main>
</body>
</html>
background-position: center 会使图像在 .hero 中水平和垂直居中。两个词组成的值 center center 含义相同。background-size: cover 会缩放图像，直到容器完全被覆盖；如果图像与容器的形状不同，图像可能会沿一个方向被裁切。如果需要显示完整图像，请使用 background-size: contain；这样可能会在容器中留下空白。若要保留图像的自然尺寸，则省略 background-size。
background-repeat: no-repeat 可以防止图像平铺，但不会调整图像大小或使其居中。当图像小于容器时，默认的重复行为可能会生成平铺图案；如果不希望出现这种效果，请使用 no-repeat。background-attachment 控制背景是随页面滚动，还是相对视口保持固定。它是可选的，也不会使图像居中。你可以用 background 简写属性写出这些声明，但分别设置各个属性更便于调整每项设置。
运行此示例，可将相同的声明格式化为 CSS 文本，以便复制到样式表中：
const declarations = {
backgroundImage: 'url("photo.jpg")',
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover"
};
for (const [property, value] of Object.entries(declarations)) {
const cssName = property.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
console.log(`${cssName}: ${value};`);
}
background-image: url("photo.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
将图像元素定位为铺满视口的替代方案
当图像属于内容或需要让辅助技术读取时，可以改用 img 元素；这是一种独立的方案，并非 CSS 背景。若要让它铺满视口并位于页面内容后方，请对它使用固定定位，为四边设置偏移量，并将它置于内容后面。要通过 top、right、bottom 和 left 以这种方式放置元素，需要使用 position 属性。
<img class="viewport-image" src="photo.jpg" alt="">
<main class="page-content">
<h1>Page content</h1>
</main>
<style>
.viewport-image {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
</style>
示例显示的标题是“Page content”，该标签仍为英文。
这里的 inset: 0 会将 top、right、bottom 和 left 都设为零，使定位框铺满视口。object-fit: cover 会在保持图像比例的同时缩放图像以填满该框，因此可能会裁切图像。使用 object-fit: contain 可以显示完整图像，但可能留下空白。只有当图像纯属装饰时，空的 alt 才合适；如果图像传达了信息，请提供有意义的替代文本。在实际页面中，请确保图像上的前景文字仍清晰可读。如果目的只是添加装饰性背景，第一种方法更简单，也不会向文档中添加图像元素。
