如何在同一頁面上創建兩個不同的背景？

-3

誰能告訴我如何創建此網站上顯示的背景： www.zucoffee.com如何在同一頁面上創建兩個不同的背景？

另外，我怎樣才能得到這種彎曲的分離？我意識到他們是兩個div，但邊界如何彎曲？

2016-09-19 wabzi

您好，歡迎來到StackOverflow。看起來你希望我們爲你寫一些代碼。儘管許多用戶願意爲遇險的編碼人員編寫代碼，但他們通常只在海報已嘗試自行解決問題時才提供幫助。證明這一努力的一個好方法是包含迄今爲止編寫的代碼，示例輸入（如果有的話），期望的輸出以及實際獲得的輸出（控制檯輸出，回溯等）。您提供的細節越多，您可能會收到的答案就越多。檢查[FAQ]和[問]。 – IndieRok

這就是說，好像你還沒有嘗試過任何東西。您是否使用瀏覽器的開發工具檢查了元素？也許檢查CSS？提示：這是一個背景圖片。 – IndieRok

彎曲的分離來自這樣的事實，即標題圖像在底部具有紫色以創建曲線。實際的文件可以在這裏看到：http://www.zucoffee.com/wp-content/themes/zu-coffee/images/header-bg.gif

這（據我所知）是相當普遍的做法，有一個背景服務於整個頁面，並有另一個單獨的背景頂部的服務只是標題和/或頁腳。取決於網站的風格，這可能包括有趣的分色，我也看到.png用於讓頁眉/頁腳設計「淡入」主背景。

顯然有許多不同的方法可以做到這一點，我相信有人會希望添加到我的答案中，但是您的示例網站選擇的方式是在其正文和標題標記上使用background屬性添加他們的圖像。從他們的css文件下面的代碼片段：

body { 
    padding:0; 
    margin:0; 
    background:#4b1259 url(images/tile-bg.gif) repeat-x; 
    width:100%; 
    display:table; 
    font:16px/22px Georgia; 
    color:#ffffff; 
    text-align:left; 
} 
.header-bg { //this is where i found them adding the header image. 
    margin-bottom:20px; 
    background:url(images/header-bg.gif) no-repeat center top; 
}

來源

2016-09-19 18:07:38 Termonator145

Div是塊級元素，並且是這樣的塊形（正方形/矩形）。

如果您使用Chromes開發人員工具或Firefox中的Firebug檢查相關頁面上的元素header-bg，則可以看到它使用css設置具有彎曲下邊緣的背景圖像。圖片是header-bg.gif。

來源

2016-09-19 18:05:11

如何在同一頁面上創建兩個不同的背景？

回答

相關問題