HTML DIV作为另一个DIV的背景

HTML DIV as the Background of another DIV

本文关键字：DIV 背景 另一个 HTML      更新时间：2023-09-26

是否有可能将1div放入另一个div中，并使div内部具有比其包含的div更大的宽度和高度?

听起来像个谜语....

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

可以吗?

是的，如果我没理解错的话

容器将处于相对位置，div "inside"将处于绝对位置绝对定位坐标和让图像居中可以这样做，默认情况下，

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

这将使图像在用户大小的容器

中居中

那么"裁剪工具"将能够操纵坐标(我认为是平等的)+或-那些0值，-，负的，将允许它扩展到"外部"容器

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

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

background:transparent url(image.png) no-repeat center;
相关文章：