HTML DIV作为另一个DIV的背景

Question

是否可以将1个DIV放置在另一个DIV中，并使DIV的宽度和高度大于包含在其中的DIV？

听起来像个谜。

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

能吗

Answer 1

是的，如果我理解正确

默认情况下，容器将相对放置，div“内部”将绝对放置在容器内-绝对定位坐标和使图像居中将在默认情况下进行，

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

这应该将图像放在用户大小的容器中

那么“裁剪工具”将能够以+或-操纵这些坐标（以我想相等的方式），或者-那些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>

Answer 3

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

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