如何制作橫幅圖片？

Question

我已經開始開發我的第一個網站。 不過我遇到了一個問題 - 我不知道如何制作“橫幅圖像”！

這是我要實現的目標的示例： 由於我是 CSS 的初學者，我將如何制作一個簡單的版本？

Answer 1

有兩種方法可以創建橫幅圖像，簡單的方法和不太困難的方法。

簡單的方法：

使用圖像編輯軟件（如 Photoshop）創建橫幅圖像，然后將該圖像用作<div>上的background-image 。 像這樣：

 #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>

我希望這有幫助。

Answer 2

 #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>