Html 如何使用 CSS 设置类似横幅的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19305994/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Set Banner-Like Background Image With CSS
提问by Brian Brian
I have been looking at a lot of the source code for sites and can't seem to figure this out. I want to have an image that's in the background, behind everything. I don't, however, want the entire background to be that image; I only want it towards the top kinda like a banner of sorts. Some examples can be found at http://www.animefreak.tv/, and http://us.battle.net/wow/en/. Right now I have a textured background with:
我一直在查看网站的大量源代码，但似乎无法弄清楚这一点。我想要一个在背景中，在一切背后的图像。然而，我不希望整个背景都是那个图像；我只希望它像一面旗帜一样靠近顶部。一些例子可以在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;
}
Any image I try to put in my CSS simply appears above the main page div of my site, when I want it to appear behind like in the given examples. I put a
我尝试放入 CSS 中的任何图像只会出现在我网站的主页 div 上方，当我希望它像给定示例中那样出现在后面时。我放了一个
<div class = "topb">
</div>
at the top of my MasterPage and then used
在我的 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);
}
in my CSS as a test, but I am obviously new to CSS and HTML development. Any Suggestions?
在我的 CSS 中作为测试，但我显然是 CSS 和 HTML 开发的新手。有什么建议？
采纳答案by shshaw
There are several ways to accomplish this.
有几种方法可以实现这一点。
CSS3 allows you to have multiple background images. You can do this:
CSS3 允许您拥有多个背景图像。你可以这样做：
body {
background-color: #000;
background-image: url(texture.png), url(banner.png);
background-position: center center, center top;
background-repeat: repeat, no-repeat;
}
Or you can add a wrapper divright after the <body>that holds all of the content and add your banner background image to that.
或者您可以div在<body>包含所有内容的之后添加一个包装器，并将您的横幅背景图像添加到其中。
HTML:
HTML：
<body>
<div id="Wrapper">
<!-- The rest of your site's content -->
</div>
</body>
CSS:
CSS：
body {
background: #000 url(texture.png) repeat center center;
}
#Wrapper {
background: url(banner.png) no-repeat center top;
}
If you want to add some spacing at the top so your content doesn't cover the banner, simply add some padding like so:
如果您想在顶部添加一些间距以便您的内容不会覆盖横幅，只需添加一些填充，如下所示：
#Wrapper { padding-top: 240px; }
