css - CSS - 顶部图像的页脚

Question

我的页面底部有我的html5 footer元素，我想在我的footer.

我添加以下 CSS：

footer {
  background: #333333 url("footer_top.png") 50% 0 no-repeat;
  padding-top: 110px; # the image has 110px height
}

它可以工作，但是我#33333遇到了背景色（左边或右边。rightlefttop

任何帮助，将不胜感激！

score 1 · Accepted Answer

css 背景不会“监听”同一元素上的填充。<img>标签确实如此。如果您想将背景图像放置在顶部，您可以使用background-position它。

尽管如此，我担心你正在尝试一些不会真正奏效的东西。我的建议是在包含图像的页脚上方放置一个 div 或其他内容。（因为无论如何您都希望图像位于页脚上方）

<div class="background_thingie"></div>
<footer></footer>

CSS是这样的：

.background_thingie {
    height: 110px;
    width 100%
    background: url(img) no-repeat top center;
}

尽管如此; 如果您真的希望页脚中的背景图像以与上面显示的页脚（top center部分）相同的方式传递，请不要忘记：如果您不重复它，宽度将会以一种方式用完或另一个将使页脚的其余部分没有背景图像（例如，如果您的页脚为 1000 像素宽且图像为 500 像素宽）

1 回答 1