因此,我希望在页脚上方从左到右填充草。我很难让它重演。我将 position 设置为 fixed,也设置为 float: left 但仍然没有运气。我会不断地把更多的图像硬编码到我的 HTML 中,但我觉得我可以用 CSS 做到这一点,而不需要 100 行额外的代码。另外,如果用户使浏览器变大或变小,我希望图像变大或变小。
HTML
<figure>
<img src="arrow.png" alt="arrow" class="arrow">
<p class="clickHere"> Click one! </p>
<img src="downwardmonkey.png" alt="down" class="head">
<img alt="down" class="footer">
</figure>
CSS
figure img.footer
{
position: fixed;
bottom: 45px;
float: left;
background-image: "grass.png";
background-repeat: repeat-x;
}
如果需要任何其他代码来帮助让我知道!
最佳答案
不是放置图像标签,而是放置一个 div 并为其提供背景图像
<figure>
<div class="grassImageDiv"></div>
</figure>
CSS:
.grassImageDiv
{
display: inline-block;
background-image: url("grass.png");
width:100%; //To make it browser size independent
height: 80px;
}
你可以根据需要给定高度和宽度。
关于html - 让图像根据浏览器大小重复自身,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22583015/