html - CSS 背景图像上的图像中不需要的填充/边距

Question

我正在尝试在有限的固定背景图像上滚动文本(不确定它到底叫什么 - 它就像视差滚动但背景图像根本不移动？)一切都很好，除了我得到一个“上方”图像底部和背景图像底部之间的小(5-10 像素)边距或填充。

底部边距和底部填充都设置为 0px(我也试过设置为 0%，但没有改善)。我还尝试了负边距和负填充，两者都没有任何效果。

我尝试了一个简单的 CSS 重置，它解决了一个单独的不需要的边距问题，但这个问题仍然存在。 (而且在每个浏览器中都是一样的。)

我确信我遗漏了一些非常简单的东西，但我还没有找到这个确切问题的答案。非常感谢任何见解。

    * 
    {
    margin: 0px;
    padding: 0px;
    }

    #text_and_image
    {
    text-align: center;
    font-family: 'Montserrat Subrayada', sans-serif;
    background: url(/images/fountain.png);
    background-attachment: fixed;
    background-size: 100%;
    padding-top: 25%;
    padding-bottom: 0px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    }

HTML:

<div id="text_and_image">
<p>this is the third one<br>it has both TEXT<br>and an IMAGE</p>
<img src="/images/bird_palm.png">
</div>

Answer 1

如果没有您的图像尺寸，很难判断，但我想由于 css 中的 background-size: 100%;，背景图像正在收缩或扩展。将两个图像设置为相同的宽度，看看问题是否仍然存在。