css - 用图像作为背景包装现有元素

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，一个“外部”具有渐变背景、可选阴影和圆 Angular 边框，另一个“内部”具有包含您的内容的白色背景。

演示: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(跨浏览器)

.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...

---

解决方案 n。 1

您真的不需要为此使用图像。

(你需要使用图像，例如，带有“木头”边框，那么你应该以老式的方式来做......每个 Angular 图像，垂直线的图像，垂直线的图像水平线，还有很多 div...)

这里只有渐变(可使用 CSS3 Gradients 实现)和圆 Angular 边框(可使用 CSS3 border-radius 实现)。您也可以使用 CSS3 box-shadow...

添加阴影

渐变很容易用 CSS3 Gradient Generator 生成，但今天它们仅针对 BACKGROUND 属性跨浏览器...您可以 use gradient on BORDERS in webkit browsers , 还没有在 FF 和 IE 中...但是你可以添加一个 div 作为窗口的标题，具有渐变背景。

这是一个用圆 Angular 边框和阴影(没有渐变)将内容包裹在窗口内的 fiddle :

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

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

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 ";
}