用菜單作爲bg圖像創建午餐菜單HTML？

我正在嘗試製作一個類似餐廳菜單的網站，該菜單由我們的廚師每週在我的設施中更新。基本上我有一個我想要使用的圖像，我希望文字覆蓋圖像的頂部。用菜單作爲bg圖像創建午餐菜單HTML？

我已經嘗試了幾個CSS代碼，我無法得到任何東西，正確地與圖像像我想要的。任何幫助，將不勝感激。我想要的形象比這大一點 - 大概800×600（這樣的文字是好的，大的爲好）

2016-03-14 MackMan

告訴我們你到目前爲止做了什麼 – jszobody

這可以實現百萬和一種方式。這不是一個討論最佳做法的網站。你需要發佈你已經完成的代碼以及沒有特別關注的代碼。 – dewd

閱讀有關浮動和邊距，絕對定位，文本對齊。如果它有反應，那麼你將不得不做更多。 – WheatBeak

我會做這樣的，乾淨，簡單的方法：

.menu { 
 
    background: url(http://i.stack.imgur.com/1H3g5.jpg); 
 
    width: 770px; 
 
    height: 562px; 
 
    padding: 25px 430px 25px 35px; 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
} 
 

 
.menu h2 { 
 
    font-size: 18px; 
 
}

<div class="menu"> 
 
    <h2>Menu position 1</h2> 
 
    <p>menu 1.1</p> 
 
    <p>menu 1.2</p> 
 
    <p>menu 1.3</p> 
 
    <h2>Menu position 2</h2> 
 
    <p>menu 2.1</p> 
 
    <p>menu 2.2</p> 
 
    <p>menu 2.3</p> 
 
</div>

的div有要的尺寸與圖像相同，且墊襯定義基本上在沒有文字應被視爲該地區，所以430px設置區域到文本的右側它不應該流入。

對於響應式佈局，您可以定義使用較小圖像的媒體查詢並相應地設置寬度，高度和填充設置。不幸的是我沒有一個容易閱讀的媒體查詢，但你可以用這個開始：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

來源

2016-03-14 19:27:10 TimeWaster

對於一些奇怪的原因，圖像當我使用這些代碼時不會出現 - 我通過哈哈的方式將它改變爲我的圖片。 – MackMan

url必須設置爲相對於css文件（不包括html文件包含它）或絕對的服務器根目錄... – TimeWaster

難道你不能把div設置爲relative嗎？在這種情況下你只需要做是否設置了高度和寬度屬性，這在確定值時比試驗和錯誤少了所有4個填充值？ – JoeL

用菜單作爲bg圖像創建午餐菜單HTML？

回答

相關問題