css - 如何有两个背景图像。一个是顶部横幅，第二个是带纹理的背景？

Question

我开始在网站上工作。我想要两张背景图片。一个是顶部的横幅图像，类似于 stack overflow 网站顶部的灰色 strip 。然后另一个图像是我必须创建带纹理背景的图像。这就像本网站上的空白区域，但不是颜色，而是可重复的图像。具有我想要的外观的网站是 pinterest.com、subtlepatterns.com、Facebook.com 等...

我尝试过很多不同的东西。我尝试在 css 的 html 标签中放置一个背景。那没有用。我还尝试在 body 标签中放置两个不同的背景图像。那没有用，因为它只会显示第一个。我还尝试在它自己的类(class)中创建背景。但是当我这样做时，它根本不会出现。也许我从 html 中遗漏了一些东西？

目前我有以下代码:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
background-image:url(../images/absurdidad.png);
background-repeat:repeat;
}

这已经创建了占据整个屏幕的主要背景图像，就像我想要的那样。知道我是否可以在顶部添加第二个以仅水平重复，那就太棒了!

在此先感谢您的帮助。

Answer 1

使用逗号，你可以在同一个元素中有多个背景:

background-image: url('first'), url('second');

同样的规则适用于其他样式:

background-position: top, bottom;

等等。

更多信息@ css3.info

如果你想要广泛的浏览器支持，多个 DIV 是唯一的方法:

<div class="one">
  <div class="two">
  </div>
</div>

祝你好运!