Question

我有以下HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>

<body>

我的CSS代码如下：

body {
    background-image: url(tree.png);
    background-repeat: no-repeat;
    background-position: center;
}

现在我的谷歌浏览器浏览器显示以下输出：

此处，图像树位于顶部中心，部分位于窗口外。

要解决此问题，我将CSS代码更改为以下内容：

body {
        background-image: url(tree.png);
        background-repeat: no-repeat;
        background-position: center;
        margin-top: 600px;
    }

现在我的浏览器显示以下输出：

我的问题是为什么我必须在顶部添加边距而背景图像默认不是我的浏览器页面的中心？

Answer 1

它与文档的高度有关。没有内容，身高就达到了最低限度。如果将CSS更改为以下内容，则背景图像应为中心：

html {
    background-image: url(tree.png);
    background-repeat: no-repeat;
    background-position: center;
    height:100%;
}

https://jsfiddle.net/z85ony88/

此外，如果您需要身体上的背景图像。使用以下内容：

html {
  height:100%;
}
body {
    background-image: url(https://jsfiddle.net/img/logo.png);
    background-repeat: no-repeat;
    background-position: center;
}

Answer 2

这是因为你的身体没有足够的高度来显示完整的图像。通过设置身体高度，或在您的身体上有足够的内容将解决问题。请查看下面的代码段。在这里，我将height: 100vh设置为覆盖屏幕，在全屏视图中进行检查。

＆＃13;

body {
  background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}

＆＃13;

<body>

</body>

＆＃13;

当背景位置指定时，背景图像部分移出窗口：center;

2 个答案: