为啥我的背景图片在底部被我的 CSS 截断了？
Posted
技术标签:
【中文标题】为啥我的背景图片在底部被我的 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>“<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.”</p>
<p>“Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.”</p>
<p>“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.”</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 以后我会牢记您概述的更多原则。当我收到的只是没有解释的反对票时，我很难学得更好。因为像你这样的人，我可以学会更好地提出正确的问题并了解什么是相关的，因为我不知道所有可能相关的东西，因为代码通常是不可预测的，尤其是在学习编码的早期阶段。我会按照你的建议练习缩小代码范围。
【参考方案1】：
用img试试这个
#background
position:absolute;
z-index:1;
width:100%;
height:100%;
<body>
<img id="background" src="https://i.imgur.com/OON2Kz3.jpg" title="">
</body>【讨论】：
【参考方案2】：如果您想将全图作为背景，请尝试 - background-size: 100% 100%;或背景尺寸：100%；
【讨论】：
以上是关于为啥我的背景图片在底部被我的 CSS 截断了？的主要内容，如果未能解决你的问题，请参考以下文章