网站背景上的另一张图片如何使用CSS放在顶部

Question

网站背景上的另一张图片如何使用CSS放在顶部

3

你好，我想在一个标签中将一张图片放在另一张图片的上方。

基本上我想让一张图片成为顶部的横幅，所以要重复-x；然后在它下面，我想要多次重复背景图片。

就像这样：

body
{
 background:url(banner.jpg); repeat: repeat-x;
 background:url(background.jpg); 
}

我不是100%确定如何做到这一点...我认为这解释了我想要的方式。

后面可能还需要添加一些内容，例如在完成背景后，我希望添加类似于background:url(footer.jpg) repeat: repeat-x; bottom的内容。

- Josip Gòdly Zirdum

1

这个SO问题概述了你所希望的CSS3实现，而不需要添加额外的标记。 - danjah

谢谢，讲得非常清楚 :) - Josip Gòdly Zirdum

3个回答

2

您需要在两个不同的容器上放置背景图像。可能是这样的：

<body>
  <div id="page">
    <div id="content">
      ...
    </div>
  </div>
</body>


#page
{
  background:url(background.jpg); 
}

#content
{
  background:url(banner.jpg); repeat: repeat x;
}

- Kon

不是一个选项。软件的模板不允许这样做... 这将需要大量的编辑和查找文件。http://www.minecraftforum.net/看看他们的背景... 我想做类似的事情。我查看了他们的CSS，但是没有起作用。 - Josip Gòdly Zirdum

也许你应该在问题中提及一下关于你奇怪的模板限制的事情？ - Kon

1

CSS3支持在单个元素上使用多个背景；这在大多数浏览器中都得到了广泛的支持，但IE <= 8除外。您可以编写以下代码：

body
{
  background-image: url(banner.jpg), url(background.jpg);
  background-repeat: repeat-x, repeat;
}

- Chowlett

不用担心。你应该知道，在不支持多重背景的浏览器中，回退的显示是“什么也没有”。如果你关心IE6-8，你会想要另一种方法，或者通过http://www.modernizr.com进行回退。 - Chowlett

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joonas · Accepted Answer

我想这就是你需要的内容。 http://jsfiddle.net/wpqDy/

html {
    height: 100%;
    width: 100%;
    background: url("bg.jpg") repeat 0px 3px;
}

body {
    background: url("bg_top.jpg") repeat-x top left;    
    height: 100%;
    width: 100%;
}