HTML DIV作为另一个DIV的背景

Question

是否可以将1 DIV放入另一个DIV并让内部DIV的宽度和高度大于其所包含的DIV？

听起来像个谜语......

基本上我想拥有一个用户可以设置宽度和高度的容器。他们还将选择和图像，裁剪它并使用jQuery调整大小。图像将是容器的背景，但是由于背景图像可以比容器大，我希望背景可以是DIV，可以扩展到容器的高度和宽度之外 - 如果您愿意，可以裁剪图像。

能够吗？

Answer 1

是的，如果我正确理解你

容器相对定位，div“inside”绝对位于其中 - 在默认情况下，绝对定位坐标和使图像居中将完成这样的事情

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

这应该将图像置于用户大小的容器中心

然后“裁剪工具”将能够操纵坐标（我假设的同等程度）{0}或+这些0值，-，负，那些将允许它扩展到“外部”容器之外

Answer 2

$('<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 3

默认情况下，背景图片将被“裁剪”。例如，如果我有500px乘500px div然后我将1000px乘1000px图像作为其背景，那么它将显示该图像的左上角500px乘500px作为背景。我可以将背景图像设置为居中，如下所示：

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