4

我一直在查看很多网站的源代码，但似乎无法弄清楚这一点。我想要一个在背景中，在一切背后的图像。但是，我不希望整个背景都是那个图像。我只希望它像某种横幅一样朝向顶部。一些示例可以在http://www.animefreak.tv/和http://us.battle.net/wow/en/ 找到。现在我有一个带纹理的背景：

body   
{

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNiIgaGVpZ2h0PSI2Ij4KPHJlY3Qgd2lkdGg9IjYiIGhlaWdodD0iNiIgZmlsbD0iI2VlZWVlZSI+PC9yZWN0Pgo8ZyBpZD0iYyI+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNlNmU2ZTYiPjwvcmVjdD4KPHJlY3QgeT0iMSIgd2lkdGg9IjMiIGhlaWdodD0iMiIgZmlsbD0iI2Q4ZDhkOCI+PC9yZWN0Pgo8L2c+Cjx1c2UgeGxpbms6aHJlZj0iI2MiIHg9IjMiIHk9IjMiPjwvdXNlPgo8L3N2Zz4=");

font-size: .80em;

font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;

padding: 0px;

color: #696969;

}

当我希望它出现在给定示例中时，我尝试放入我的 CSS 中的任何图像都只会出现在我网站的主页 div 上方。我放了一个

 <div class = "topb">

 </div>

在我的 MasterPage 顶部，然后使用

.topb
{
height: 243px;margin: 0px;padding: 0px;overflow: hidden;
background:  url(/images/test2.jpg) no-repeat top center;
background-image:url(/images/test2.jpg);
}

在我的 CSS 中作为测试，但我显然是 CSS 和 HTML 开发的新手。有什么建议么？

4

1 回答 1

3

有几种方法可以做到这一点。

CSS3 允许您拥有多个背景图像。你可以这样做：

body {
  background-color: #000;
  background-image: url(texture.png), url(banner.png);
  background-position: center center, center top;
  background-repeat: repeat, no-repeat;
}

或者，您可以在包含所有内容的div之后添加一个包装器，并将您的横幅背景图像添加到其中。<body>

HTML：

<body>
  <div id="Wrapper">
  <!-- The rest of your site's content -->
  </div>
</body>

CSS：

body {
  background: #000 url(texture.png) repeat center center;
}
#Wrapper {
  background: url(banner.png) no-repeat center top;
}

如果您想在顶部添加一些间距，以便您的内容不会覆盖横幅，只需添加一些填充，如下所示：

#Wrapper { padding-top: 240px; }
于 2013-10-10T21:09:04.207 回答