用图像作为背景包裹存在的元素

Question

我在页面中有一些容器，如下所示：

<div id="con1" class="window">
    <div>xxxx</div>
    <div>xxxx</div>
</div>

<div id="con2" class="window">
    <div>xxxx</div>
    <div>xxxx</div>
</div>

这样的图像：

现在，我想将图像作为容器的背景，使容器看起来像一个窗口。像这样：

此外，容器的大小可能会根据用户而改变。所以我希望它可以在添加容器的内容时​​自动扩展。

有什么想法吗？

---

更新

我还尝试过：

这就是我现在得到的：jsfiddle

Answer 1

编辑：

解决方案n.2：

你甚至可以使用两个div，一个带有渐变背景的“外部”，可选的阴影和圆形边框，还有一个带有白色背景的“内部”包含你的东西。

演示：http://jsfiddle.net/TqutW/4/

HTML

<div class="windowBorder" >
    <div class="windowContent" >
       <div >xxxxxxxxxxxxxxx</div>
       <div >xxxxxxxxxxxxxxx</div>
       <div >xxxxxxxxxxxxxxx</div>
       <div >xxxxxxxxxxxxxxx</div>                          
    </div>        
</div>

CSS（crossbrowser）

.windowBorder{
  margin: 30px;  
  padding: 20px 8px 8px 8px;  
  box-shadow: 2px 2px 5px 1px #111111;
  border-radius: 10px;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 13%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(13%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 13%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 13%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 13%); /* IE10+ */
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 13%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}

.windowContent {    
   padding: 10px;
   background-color: white;   
}

您只需要通过javascript ...

创建内容周围的div

---

解决方案1

您实际上不需要为此使用图像。

（你需要使用图像，例如，带有“木头”边框，然后你应该用老派的方式...每个角度的图像，垂直线的一个图像，一个用于水平线，以及很多div ...）

你所拥有的只是一个渐变（可以使用CSS3 Gradients实现）和圆形边框（使用CSS3 border-radius来实现）。您也可以使用CSS3 box-shadow ...

添加阴影

使用CSS3 Gradient Generator可以轻松生成渐变，但今天它们只是BACKGROUND属性的跨浏览器...你可以use gradient on BORDERS in webkit browsers，还不是FF或IE ..但是你可以添加一个div作为窗口的标题，并带有渐变背景。

这是一个包含圆形边框和阴影（没有渐变）的窗口内包装内容的小提琴：

http://jsfiddle.net/TqutW/3/

唯一需要的javascript是将新类应用于容器div ...享受。

HTML

   <div id="container1">            
        <div >xxxxxxxxxxxxxxx</div>
        <div >xxxxxxxxxxxxxxx</div>
        <div >xxxxxxxxxxxxxxx</div>
        <div >xxxxxxxxxxxxxxx</div>
   </div>
   <br/>
   <input type="button" id="click"  value="windowization! :)"/>

CSS

.window{    
  margin: 30px;
  padding: 10px;
  border-style: solid;  
  border-width: 20px 8px 8px 8px;
  border-color: #444;
  border-radius: 10px;
  box-shadow: 2px 2px 10px 1px #111111;
}

JS

document.getElementById("click").onclick=function(){
   document.getElementById("container1").className+=" window ";
}

Answer 2

尝试小提琴， http://jsfiddle.net/siyakunde/TqutW/1/ 这是你想要做的吗？

#content{
  background-image: url('http://www.google.com/images/srpr/logo3w.png');
  background-size: 100% 100%;
}