Html 如何制作横幅图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26518339/
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 Make a Banner Image?
提问by xVxM4tthewxVx
I have started developing my first website. I have run into an issue though - I can't figure out how to make a "Banner Image"!
我已经开始开发我的第一个网站。不过我遇到了一个问题 - 我不知道如何制作“横幅图像”！
Here is an example of what I'm trying to achieve:
Since I am a beginner in CSS, how would I make a simple version of this?
这是我想要实现的一个例子：
由于我是 CSS 初学者，我将如何制作一个简单的版本？
回答by Fahad Hasan
There are two ways using which you can create a banner image, the easy way and the not-so-difficult way.
有两种方法可以用来创建横幅图像，简单的方法和不太难的方法。
The Easy Way:
简单的方法：
Create a banner image using an image editing software like Photoshop and then use that image as a background-imageon a <div>. Like this:
创建使用图像编辑Photoshop等软件的一面旗帜图像，然后使用该图像作为background-image一个<div>。像这样：
#bannerimage {
width: 100%;
background-image: url(http://s30.postimg.org/x0ne0p5wx/bootsrap.png);
height: 405px;
background-color: purple;
background-position: center;
}<div id="bannerimage"></div>The Not-So-Difficult Way:
不太难的方法：
You will need to convert the banner design into HTML and style it using CSS. For example, let's take into account that purple bootstrap banner. It has a large purple background and all the text is added on it and then styled using CSS. You can do that like this:
您需要将横幅设计转换为 HTML 并使用 CSS 为其设置样式。例如，让我们考虑紫色引导横幅。它有一个大的紫色背景，所有的文本都添加在上面，然后使用 CSS 进行样式设置。你可以这样做：
#header {
background: #664c8f;
height: auto;
padding: 100px 100px
}
h1 {
color: white;
font-family: Arial;
text-align: center;
}
a#download {
display: block;
text-align: center;
width: 150px;
margin: 0px auto;
padding: 20px;
color: white;
text-transform: uppercase;
font-family: Arial;
border: 1px solid #fff;
text-decoration: none;
border-radius: 10px;
}<div id="header">
<h1>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</h1><a href="#" id="download">Download</a>
</div>I hope this helps.
我希望这有帮助。
