如何制作横幅图片？

Question

我已经开始开发我的第一个网站了。我遇到了一个问题 - 我无法弄清楚如何制作一个横幅图像＆＃34;！

以下是我尝试实现的一个示例： 由于我是CSS的初学者，我如何制作一个简单的版本呢？

Answer 1

使用这两种方法可以创建横幅图像，简单方法和不那么困难的方式。

简单方法：

使用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>

不那么困难的方式：

您需要将横幅设计转换为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>

我希望这会有所帮助。