0

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

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

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

像这样的图像：

在此处输入图像描述

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

在此处输入图像描述

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

任何的想法？

更新：

我已经尝试过的：

9个div布局

这就是我现在得到的：jsfiddle

4

2 回答 2

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（跨浏览器）

.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

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

（例如，您需要使用带有“木头”边框的图像，那么您应该以老式的方式进行操作……每个角度的图像，垂直线的图像，水平线的图像，还有很多 div...)

您在这里所拥有的只是渐变（使用 可实现CSS3 Gradients）和圆角边框（使用可实现CSS3 border-radius）。CSS3 box-shadow您也可以使用...添加阴影

渐变很容易用CSS3 Gradient Generator 生成，但现在它们只是跨浏览器的BACKGROUND属性......你可以在 webkit 浏览器中的 BORDERS 上使用渐变，但在 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 ";
}
于 2013-01-08T13:17:25.723 回答
0

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

#content{
  background-image: url('http://www.google.com/images/srpr/logo3w.png');
  background-size: 100% 100%;
}
于 2013-01-08T12:52:01.540 回答