可變高度與自定義背景圖像 - 什麼是最好的技術？

我想製作一些類似於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

可變高度與自定義背景圖像 - 什麼是最好的技術？

回答

相關問題