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

问题描述

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

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

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>

标签： htmlcss

试试这个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>

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

问题描述

解决方案

推荐阅读