css背景图居中

<style>
div{
     background-image: url(../images/about-banner.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    min-height: 400px;
    display: flex;
}
</style>

<div></div>

• background-image: url(../images/about-banner.webp);: 这行代码指定了一个背景图片，图片的路径是相对于当前HTML文件的。图片文件名为about-banner.webp，存储在images文件夹中。

• background-size: cover;: 这一行设置背景图片的大小，使图片按比例缩放，以完全覆盖<div>的整个背景区域。图片可能会被裁剪，但不会变形。

• background-repeat: no-repeat;: 这行代码阻止背景图片在<div>的背景区域内重复。即使背景区域比图片大，也只显示一张图片。

• background-position: center;: 这行代码将背景图片在<div>内居中显示。无论<div>的大小如何，图片都将从中间开始显示。

• background-attachment: scroll;: 这行代码规定背景图片随着页面内容的滚动而移动。这是背景图片的默认行为。

• min-height: 400px;: 这行代码设置了<div>元素的最小高度为400像素。即使没有内容，<div>的高度也至少会是400像素。

• display: flex;: 这行代码将<div>的显示模式设置为flex，使它能够成为一个弹性盒子容器，允许子元素在其中灵活排列。