我正在尝试在有限的固定背景图像上滚动文字(不确定它的确切名称 - 它就像视差滚动,但背景图像根本不移动?)一切都很好,除了我得到了一个“上”图像底部与背景图像底部之间的小(5-10px)边距或填充。
底部边距和底部边距都设置为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>
答案 0 :(得分:0)
如果没有图像尺寸,很难判断,但我认为由于css中的background-size: 100%;
,背景图像正在缩小或展开。将两个图像设置为相同的宽度,并查看问题是否仍然存在。