Question

我一直在寻找很多网站的源代码，但似乎无法解决这个问题。我希望有一个背景中的图像，背后的一切。但是，我并不希望整个背景都是那个形象;我只希望它能像顶级的旗帜一样走向顶峰。可以在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开发的新手。有什么建议吗？

Answer 1

有几种方法可以实现这一目标。

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; }

如何使用CSS设置类似横幅的背景图像

1 个答案: