HTML DIV作爲另一個DIV的背景

Question

是否可以將1個DIV放置在另一個DIV中，並讓DIV內部的寬度和高度大於它所包含的DIV的寬度和高度？

聽起來像謎語....

基本上我想有用戶可以設定的寬度和高度的容器。他們也會選擇併成像，裁剪並使用jQuery調整大小。圖像將成爲容器的背景，但是由於背景圖像可能比容器更大，所以我們希望背景可以是可以擴展到容器高度和寬度以外的DIV - 如果你喜歡，裁剪圖像。

能行嗎？

Answer 1

$('<div>').attr('id', 'innerdiv').appendTo($('#div')); 

CSS

#div{ 
    height: 100px; 
    width: 100px; 
    background: green; 
} 

#innerdiv{ 
    height: 200px; 
    width: 200px; 
    background: red; 
} 

HTML默認

<div id="div"></div> 

http://jsfiddle.net/bKetM/

Answer 2

背景圖像將被 '裁剪'。例如，如果我有500px x 500px的div，然後我將1000px x 1000px的圖片作爲背景，那麼它會將該圖片的左上500px x 500像素顯示爲背景。我可以設置背景圖片爲中心，像這樣：

background:transparent url(image.png) no-repeat center; 

Answer 3

是的，如果我正確地理解

你

容器將相對定位，在div「內」將絕對定位裏面 - 絕對定位座標，並得到中心會做這樣的事情，在默認情況下，圖像，

#inner { 
position: absolute; 
top: 0 ; 
left: 0; 
right: 0; 
bottom: 0; 
background: url(theimage.jpg) no-repeat 50% 50%; 
} 

本應在用戶規模的集裝箱中心站的圖像

那麼「裁剪工具」將能夠操縱座標（以我相同的衡量標準假設）+或-那些0值，-，否定的，將允許它擴展到「外部」容器之外