CSS：如何在固定寬度的居中div的背景中顯示圖像？

我寫了一個網頁，內容坐在一個固定寬度的範圍內，居中DIV，像這樣：CSS：如何在固定寬度的居中div的背景中顯示圖像？

<div style='width:800px; margin: -5px auto 0px auto;' >  
This is a fixed-width centered div! 
</div>

一切都很好，直到我被要求把專區內的背景圖像。使用CSS背景不可避免會導致圖像被拉伸或平鋪。我不想那樣。我想要一個圖像的實例，它的左上角位於我的固定寬度div的左上角。

我試過這樣做了幾種方法。

這裏是不起作用的第一種方式：

<img src='images/background.jpg' alt='background' 
style='position:relative;left:0;top:0;z-index:-1' />

在這個例子中，圖像定位正是我想要的，但div的文本出現在圖像的下方。

這裏是不起作用的第二種方式：

<img src='images/background.jpg' alt='background' 
style='position:absolute;left:0;top:0;z-index:-1' />

使用絕對定位，因爲我想要的文字出現在圖像上。但是，圖像現在位於頁面的左上角。這是可以預料的，因爲沒有其他具有絕對定位的元素。我知道解決方案應該是將固定寬度居中的div的位置設置爲絕對位置。但是，當我這樣做時，我的固定寬度div不再居中：

我的div不再居中！

如何編寫我的HTML和CSS，以便在背景圖像背後具有固定寬度居中的div內的文本？

來源

2011-09-16 Daniel Allen Langdon

@antisanity，謝謝你使用'background-repeat' CSS的答案。我仍然有興趣知道是否有一種使用CSS定位的方式，使用'img'標籤。我相信這將是能夠用於未來努力的偉大事情。 –

使用CSS背景不可避免的結果在圖像被拉伸或平鋪。

是的，背景圖片重複 - 默認。但是，您可以明確設置background-repeat到no-repeat

<div style='width:800px; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >  
This is a fixed-width centered div! 
</div>

[編輯]垂直限幅，可以通過設置div的min-height的圖像的像素高度的解決。這將確保您的div始終爲至少與您的圖片一樣高。這是理想的解決方案。

但是，如果你的形象是可以想象比你div的800像素的靜態寬度更寬，你需要回到嵌套的圖像解決方案...讓股利position:relative和圖像position:absolute和圖像的頂部/左將相對於div而不是頁面。在與圖像上的z-index-1組合，你要善於去（fiddle demonstrating an un-clipped image）

來源

2011-09-16 15:24:46 canon

+1：這與我想要的非常接近，並且它處理div大於圖像的情況。但是，只要div小於圖像，此代碼就會導致圖像被裁剪。 –

已更新，以解決裁剪問題。 – canon

您可以用速記配置background屬性：

background: <background-color> url(<background-image>) <background-position-x> <background-position-y> <background-repeat>;

如下：

<div style='position:fixed; width:800px; margin: -5px auto 0px auto; border: 2px solid #ccc; height: 5em; background: rgba(255,255,255,0.5) url(http://davidrhysthomas.co.uk/img/dexter.png) 0 0 no-repeat;'>  
This is a fixed-width centered div! 
</div>

JS Fiddle demo。

參考：

CSS background at the MDC。

來源

2011-09-16 15:30:52

您可以使用「overflow：visible;」以確保圖像不會被裁剪。

<div style='width:800px; overflow: visible; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >  
This is a fixed-width centered div! 
</div>

或者，或者嘗試使div的「最小高度」與圖像的高度相同。我在下面的例子中使用了300px，但是您應該將其更改爲您的圖片的大小。

<div style='width:800px; min-height: 300px; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >  
This is a fixed-width centered div! 
</div>

來源

2011-09-16 16:35:19 Adam

CSS：如何在固定寬度的居中div的背景中顯示圖像？

回答

相關問題