可变高度与自定义背景图像 - 什么是最好的技术？

我想制作一些类似于apple.com主页底部的4个盒子，但我希望它们可以是变高。可变高度与自定义背景图像 - 什么是最好的技术？

我能想到的最简单的技术是有两个div。第一个含除了在其背景图像底部的“上限”的一切，并与底盖的第二个div，像这样：

<div class="top-and-middle"> 
</div> 
<div class="bottom"> 
</div> 

/-----------------\ ^
|     | | 
|     | | 
| top-and-middle | | <this height can stretch 
|     | | 
|     | v 
------------------- 
|  bottom  | 
\-----------------/

但是，这在我看来是不那么优雅有..它更好的方法？也许只有一个div？最好只使用CSS，但也可能使用PHP或Jquery。

来源

2010-09-08 cannyboy

今天常用的技术是嵌套divs，而不是单独的。每个图像都有自己的背景图像，一个顶部对齐，一个底部对齐，内部（前部）背景不重复，另一个（后部）背景高度足以适应div的任何合理高度。

<div class="box"><div class="wrap"> 
    content 
</div></div> 

.box { background: url(/img/box-top-and-middle.png) top left no-repeat; } 
.box .wrap { background: url(/img/box-bottom.png) bottom left no-repeat; }

这样做的好处是你可以更容易地在内容下面有边缘背景。

对于水平情况，这被普及为'sliding doors'（尽管该技术在该文章之前肯定被使用）。其他各种组合，例如三个嵌套的div，它们具有重复的主背景和单独的侧面图像，并且在病理情况下为所有边（您在实践中永远不需要这样做）提供9深度的div嵌套。

好消息是，在CSS3您可以在单个元件上有多个背景图像，不再需要任何额外的包装的div：

.box { 
    background: 
     url(/img/box-top-and-middle.png) top left no-repeat, 
     url(/img/box-bottom.png) bottom left no-repeat; 
}

这是漂亮的Backgrounds and Borders模块的一部分。不幸的是，直到即将到来的版本9，它才被IE支持，所以如果你不介意在当前的IE版本和其他旧版浏览器中看到skewiff，那么你只能使用它。

来源

2010-09-08 23:04:56 bobince

可变高度与自定义背景图像 - 什么是最好的技术？

回答

相关问题