为什么背景位置没有将背景图像完全粘贴到元素的底部边缘？答案

【问题标题】：Why is background-position not fully sticking a background-image to the bottom edge of an element?为什么背景位置没有将背景图像完全粘贴到元素的底部边缘？
【发布时间】：2020-04-13 00:07:00
【问题描述】：

我遇到以下问题：当我为元素提供背景图像（SVG）并使用 background-position 定位时，图像和底部元素之间的空间很小。

body {
    color: black;
    margin:0;
    padding: 0;
    font-family: cursive;
    background-color: tomato;
}
h1,h2,p {
    margin:0;
}
.bighead {
    min-height: 100vh;
    background-image: url(../img/park.svg);
    background-repeat: no-repeat;
    background-position: center 100%;
}

.main-content {
    min-height: 100vh;
    background-color: white;
}

<body class="bg">
    <header class="bighead">
        <h1>header</h1>
    </header>
    <main class="main-content">

    </main>
</body>

为了解决这个问题并使图像完全贴在底部，我将垂直位置的值更改为 100.5%，以便 SVG 向下溢出元素。我想避免这种情况，并保持整个 SVG 文件在图像和 .bighead 元素的底部边缘之间没有任何间隙。请注意，我故意在正文上使用background-color。

你注意到底部的那个小缝隙，对吧？ 为什么会这样？

顺便说一句，如果您想要确切的 SVG 文件，可以从以下位置获取它：https://undraw.co/search，只需搜索 park，它就会显示为第一张图片。

谢谢！

【问题讨论】：

标签： css svg

【解决方案1】：

您是否仔细检查了 SVG 底部没有空像素？

自从我在您链接的页面上使用检查模式并选择 SVG 后。然后放大我拍的截图我也看到了这个1px。

【讨论】：