Question

我正在用要居中的背景图像制作标题，因此我添加了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;
}

Answer 1

使用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;
 }

Answer 2

background-size: cover;将在需要时裁剪图像。它计划要做的就是填充整个页面，而不管整个图像是否适合页面。

background-size: contain;确保整个图像都显示在页面上，无论其大小是否足以填充整个页面。

CSS-背景位置：中心中心；使图像Disapper

2 个答案: