gpt4 book ai didi

html - css - 背景位置 : center center; makes image disapper

转载 作者:太空宇宙 更新时间:2023-11-04 05:59:51 26 4
gpt4 key购买 nike

我正在制作一个带有我想居中的背景图像的标题,所以我添加了 background-position: center center;但是有了它,如果我删除背景位置,图像就会消失:中心中心;一切正常。我应该如何解决这个问题,因为我在 Chrome 控制台中没有看到任何错误。

<body>
<div class="wrapper">
<header class="header">
</header>
</div>
</body>

.header {
min-height: 80rem;
background-image: url("../images/bg-header.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
display: flex;
justify-content: center;
align-items: flex-start;
}

最佳答案

使用 background-size: cover 将放大图像直到填满整个 div。

尝试使用 background-size: contain。这将在容器内显示您的图像并允许您将其居中。

.header {
background-image: url("../images/bg-header.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
display: flex;
justify-content: center;
align-items: flex-start;
}

关于html - css - 背景位置 : center center; makes image disapper,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57422891/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com