DIV邊框頂部和底部的不同圖像

我有一個我正在開發的網站，其中一個要求是它不能使用任何客戶端腳本（jQuery/JavaScript）。而且因爲我不是，非常適合CSS，所以我有點卡在這裏。DIV邊框頂部和底部的不同圖像

我有一個簡單的div，應該有一個「邊框圖像」。但我不能使用CSS border-image，因爲它不適用於IE（已經測試過），並且我無法得到兩個不同的圖像，可以用background-image:來處理頂部和底部 - 所以現在我還在想我能做些什麼做...

下面是它應該是什麼樣子，這兩個箭頭看東西都是2個PNG文件：

enter image description here

有沒有辦法做到這一點？通過僅使用1格和2個圖像？沒有JavaScript，並且還保持跨瀏覽器兼容性（有一些例外，如ie6 <）？

來源

2012-07-22 Arrow

這個工作在：IE9，火狐，Chrome，Opera和Safari

CODE：

<style> 
     #Container { 
     width: 400px; 
     height: 400px; 
     margin-left: auto; 
     margin-right: auto; 
     border:1px solid #000000; 
     } 


     .boxTop { 
     position: relative; 
     left: 100; 
     top: 100; 
     width: 200px; 
     height: 10px; 
     background-color:#00CC00; 
     /*place background image css code here and remove line above*/ 
     } 

     .box { 
     position: relative; 
     left: 100; 
     top: 100; 
     width: 200px; 
     height: 200px; 
     background-color:#CC0000; 
     } 

     .boxBtm { 
     position: relative; 
     left: 100; 
     top: 100; 
     width: 200px; 
     height: 10px; 
     background-color:#0000CC; 
     /*place background image css code here and remove line above*/ 
     } 
    </style> 

    <div id="Container"> 
     <div class="boxTop"></div> 
     <div class="box"></div> 
     <div class="boxBtm"></div> 
    </div>

來源

2012-07-22 17:33:45 Darcey

Darcey的解決方案是非常好的。盒子裏面有3個div，中間是內容，另外2個是圖片（帶有css屬性背景圖片）。

如果你不想修改你的HTML，你可以嘗試用CSS玩：前和：後 Example

來源

2012-07-22 17:41:00 enTropy

他說1 div和2圖片.. – 2012-07-22 17:45:21

只有一個div，他應該嘗試：before /：afer stuff，正如我所說的，但我認爲3 div方法更安全的瀏覽器 – enTropy 2012-07-23 00:14:59

首先解決方法：只使用gradient小號。沒有圖像，沒有額外的元素，甚至僞元素。

當然，IE9和更舊版本不支持gradient，所以另一種解決方案是使用多個背景。

IE8及以上不支持多背景CSS3的方式，但你可以使用AlphaImageLoaderfilter作爲後備這些瀏覽器。

來源

2012-07-22 17:43:33 Ana

如果塊已固定height和width只設置背景圖像和padding s。如果它已修復width請使用@Mr。 Alien的解決方案。並且如果已經修復了height作物圖像，並且使背景repeat-x。如果width和height都是動態的，我會建議使用2-3個額外的div（無論如何，我知道你想避免它），我不認爲玩:before和:after更好。

來源

2012-07-22 17:53:50 F0G

DIV邊框頂部和底部的不同圖像

回答

相關問題