三个背景图片

我该如何去设置一个页面，使用divs和css，每个页面都有一个背景图像，中间的页面内容。左侧和右侧显示图像并根据窗口大小收缩/增长，而内容窗格始终保持相同大小。三个背景图片

alt text

容易做到表，但我似乎无法把它如何使用div标签的作品。

2010-10-12 emachine

看到这个解决方案，我在另一篇文章中提出： [解决方案的jsfiddle（http://jsfiddle.net/bNfVt/11/） – 2010-11-03 10:19:52

我想你会在这里找到一个很好的例子：http://matthewjamestaylor.com/blog/perfect-3-column.htm（这听起来像你可能没有太多的内容在你的3列布局，但它基本上是'3列布局'）这些例子应该能够修改为使中心面板具有固定的宽度，而其他的调整。

编辑：这一个特别似乎是你在找什么：http://matthewjamestaylor.com/blog/split-page-3-column-liquid-layout.htm

来源

2010-10-12 19:05:18 quoo

这似乎教程围绕所有列加起来高达100％。在中心固定列宽度时，外部列将不得不相应地调整其百分比。猜猜我可以用JS做到这一点，但我无法想象这是一个不寻常的塞纳里奥。 – emachine 2010-10-12 19:09:57

上面链接的“拆分页面”布局应该是您要查找的内容。应该不需要使用js。 – quoo 2010-10-12 19:45:42

有几个方法可以做到这一点：

有3个div的：左，中，中，每个都有自己的背景颜色/图像。
在所有3个div后面的元素上设置单个背景图像。该图像可以垂直重复。在你的情况下，我也将背景颜色设置为黑色，以便左侧和右侧列展开。（更多关于人造色谱柱：http://www.alistapart.com/articles/fauxcolumns/）
另外检查Sliding Doors（http://www.alistapart.com/articles/slidingdoors/）以获得更灵活的中间色谱柱。

来源

2010-10-12 19:09:54 KatieK

嗯，单幅图像的建议似乎是最接近的，但我设置了3个图像的3个div。需要知道如何左右弯曲以平均覆盖页面，而中间列保持固定的1000px。 – emachine 2010-10-12 19:16:16

那么，这很有趣。我觉得这样是你在找什么：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <!-- Marc Thibault [email protected] --> 
    <title>Three accordion columns</title> 

    <style> 
     * { 
      margin: 0; padding: 0; 
     } 

     #wrapper { 
      position: absolute; 
      bottom: 0; 
      width: 100%; 
      height: 100%; 
     } 

     #left { 
      position: absolute; left: 0; top: 0; 
      height: 100%; 
      width: 50%; 
      background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/12/750_police_women.jpg); 
      background-color: yellow; 
      background-repeat: repeat-y; 
      z-index: 5; 
     } 

     #center { 
      position: absolute; right: 0; left: 0; top: 0; 
      margin: 0 auto; 
      width: 600px; 
      height: 100%; 
      color: white; 
      background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/11/cnews11thisone.jpg); 
      background-color: blue; 
      background-repeat: repeat-y; 
      z-index: 10; 
     } 
     #right { 
      position: absolute; top: 0; right: 0; 
      width: 50%; 
      height: 100%; 
      color: white; 
      text-align: right; 
      background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/10/750_jerk_gets_bit.jpg); 
      background-color: green; 
      background-repeat: repeat-y; 
      background-position: right top; 
      z-index: 5; 
     } 


    </style> 

</head> 
<body> 
    <div id="wrapper"> 
     <div id="left"> 
      <p>This is Left</p> 
     </div> 
     <div id="right"> 
      <p>This is Right</p> 
     </div> 
     <div id="center"> 
      <p>This is Center</p> 
     </div> 
    </div> 
</body> 
</html>

来源

2010-10-14 00:25:05

三个背景图片

回答

相关问题