有背景圖片從DIV

向左延伸我的問題的一個簡單的例子：有背景圖片從DIV

illustration of my problem

我想與特定的寬度來構建一個頁面，但我希望有一個標題圖片到50像素延伸到剩下的網站左側。

忍受我一下。

下面的代碼片段顯示了我目前的HTML和CSS：

<body> 
    <div id="header"> 
    </div> 
</body> 

body: { 
    background-color: #FDFBDC; 
} 
#header { 
    background: transparent url('images/headerforweb.png') no-repeat -50px 0; 
    margin-left: auto; 
    margin-right: auto; 
}

我所試圖實現的是對圖像延長50像素左#header div充滿的。但是，我希望#header居中，所以我必須將邊距左右設置爲自動。此外，我無法知道標有「？」的距離，因爲它取決於客戶的屏幕尺寸。

問題是，用我的方法，將圖像設置爲#header的背景，額外的50px被剪裁。我環顧四周，發現背景圖像不能超出其元素的大小。

我也嘗試在封裝div中封裝#header，它擴展到頁面的整個寬度，並將圖像設置爲背景。但是，在這種情況下，我需要知道「？」，將它設置爲圖像背景的左邊距，但不可能知道。

還有其他想法嗎？

來源

2012-11-14 FrontierPsycho

您可以通過使圖像成爲標題的子項，然後使用負餘量左側來完成此操作。

喜歡這張jsfiddle

<div id="header"> 
    <div id="image"> 
    </div> 
</div> 

#header { 
    margin: 0 auto; 
    width: 400px; 
    background: red; 
    height: 80px; 
} 

#image { 
    margin-left: -50px; 
    background: blue; 
    width: 300px; 
    height: 50px; 
}

來源

2012-11-14 15:04:38 Andy

我試圖避免這個解決方案，因爲我有其他內容的標題，我認爲圖像會搞砸他們，但我試了一下，它確實工作。然後我看到你的解決方案，所以我想你會得到滴答聲:)謝謝！ – FrontierPsycho

包括另一跨度在報頭和所述背景圖像傳遞給該跨度。添加位置：相對於#header。和position：absolute; left：-50px; top：0到新創建的跨度。

來源

2012-11-14 15:04:44 Dharma

謝謝，我認爲這個答案也可以，我只是用另一個，沒關係。 – FrontierPsycho

或者只是使用position：relative在包含您的圖像的封閉div上。

body: {background-color: #FDFBDC;} 
#header { 
color:#ccc; 
width:800px; 
height:600px; 
margin-left: auto; 
margin-right: auto; 
} 

div.header_image { position:relative; left:-50px; top:0px;  background:url(images/headerforweb.png) 0 0 no-repeat;} 



<div id="header"> 
<div class="header_image"> 
<h1>CONTENT</h1> 
<h2>MORE CONTENT</h2> 
<h3>MORE CONTENT</h3> 
</div> 
</div>

來源

2012-11-14 15:59:00 Jonrp

Jonrp，你最好提供你的答案與工作JSFiddle的例子！資格證明會更容易！ –

有背景圖片從DIV

回答

相關問題