为什么我的背景图片在底部被我的 CSS 截断了？答案

【问题标题】：Why is my background image cut off at the bottom by my CSS?为什么我的背景图片在底部被我的 CSS 截断了？
【发布时间】：2019-01-03 16:51:39
【问题描述】：

我正在尝试创建一个页面，其中背景图像覆盖它而不重复或扩展超出窗口。现在它在底部被切断了。

我尝试过使用视口大小、百分比和覆盖，但它要么重复，要么被截断，几乎一半的窗口完全变白。

html, body {
    margin:0; 
    padding:0; 
    width:100%; 
    height:99vmin; 
    overflow:hidden;
}
body {
    font-family:verdana, arial, sans-serif; 
    font-size:76%;
}
#background {
    position:absolute; 
    z-index:1; 
    width:100%; 
    height:100%;
    background-image: url(https://i.imgur.com/OON2Kz3.jpg); 
    background-size: cover;
}
#quotes {
    text-decoration: none;
    padding-top: 30%;
    padding-right: 20%;
    padding-left: 20%;
    margin: auto;
    position: absolute;
    text-align: center;
    color: beige;
    font-size: 36px;
}
.button {
    position: absolute;
    z-index: 1000;
    margin: 50%;
    text-align: center;
}

<body>
    <div id="background">
        <div id="quotes">
        <p>&#8220;<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.&#8221;</p>
        <p>&#8220;Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.&#8221;</p>
        <p>&#8220;We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable for us.&#8221;</p>
    </div>
        </div>
    <button class="button">Thus Spoke Nietzsche</button>
<script src="randomize.js"></script>
</body>

【问题讨论】：

我如何知道哪些代码相关，哪些不相关？代码与各种其他代码交互。告诉我要遵守的规则。
@Thomas 您的问题与html 和css 有关，因此我们需要同时查看这两个问题。您的问题与您的背景有关，这意味着我们需要查看您正在调整 background 属性的任何元素。如果您不确定什么是相关的，我建议您逐行检查您的代码并确保您知道它在做什么。你也许能找到你的问题。
@MikeDiglio 我改变了它。我希望它会更好。
@Thomas 为了确定代码是否相关，请从您拥有的代码开始，然后删除样式/标记，直到您的 sn-p 不再重现您所描述的错误。至少有一半的时间，这也应该可以帮助您自己发现问题所在（这是我们需要 MCVE 的主要原因）。有时也可以使用扣除；例如对于您描述的问题，任何可能更改字体颜色或样式的代码显然与背景图像大小问题无关，因此不应包含在代码 sn-p 中。
@TylerH 以后我会牢记您概述的更多原则。当我收到的只是没有解释的反对票时，我很难学得更好。因为像你这样的人，我可以学会更好地提出正确的问题并了解什么是相关的，因为我不知道所有可能相关的东西，因为代码通常是不可预测的，尤其是在学习编码的早期阶段。我会按照你的建议练习缩小代码范围。

标签： html css

【解决方案1】：

用img试试这个

#background{
  position:absolute; 
  z-index:1; 
  width:100%; 
  height:100%;
}

<body>
<img id="background" src="https://i.imgur.com/OON2Kz3.jpg" alt="" title="">
</body>

【讨论】：

【解决方案2】：

如果您想将全图作为背景，请尝试 - background-size: 100% 100%;或背景尺寸：100%；

【讨论】：