如何使CSS邊框圖像工作

我被我的網站上的邊框卡住了。我想在垂直菜單的頂部放置一個圖像，一個放在底部，另一個放在背景的中間，但不起作用。如何使CSS邊框圖像工作

這是我的代碼：

.border-image { 
border: solid transparent 10px; //I tried with and without this line 
border-top-image: url(/pictures/menu_top.png) 10 round round; 
border-bottom-image: url(/pictures/menu_bottom.png) 10 round round; 
} 
#menu_left { 
background-image: url(/pictures/menu_middle.png); 
background-repeat:repeat-y; 
}

我只有中間的圖像而不是頂部/底部。 Firefox給我：

屬性«border-bottom-image»unknow。物業«邊界 - 圖像»未知。

任何想法我做錯了什麼？

編輯：這適用於FF，Chorme和Opera，但不適用於IE9。

border-color:transparent; border-width:45px 10px 48px 10px; 
-moz-border-image:url("../pictures/left_menu_full.png") 45 9 48 9 stretch ; 
-webkit-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat; 
-o-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ; 
-ms-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ; 
border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ;

來源

2011-10-22 remyremy

正如在你提到的文章中，你仍然必須使用前綴爲Firefox的-moz。

-webkit的WebKit瀏覽器如Safari和Chrome -o歌劇有時... -ms對於微軟來說，雖然在這種情況下，邊界圖像，只是沒有在IE9和下方支撐。

來源

2011-10-22 14:10:12 kojiro

謝謝！經過一些改變，我設法得到了一些東西： 'border-color：transparent; border-width：45px 10px 48px 10px; -moz-border-image：url（「../ pictures/left_menu_full.png」）45 10 48 10 repeat; -webkit-border-image：url（「../ pictures/left_menu_full.png」）45 10 48 10 repeat; border-image：url（「../ pictures/left_menu_full.png」）45 10 48 10 repeat;' 它適用於FF和Chrome，但不適用於IE 9和Opera。任何tryck的？ – remyremy

@remyremy見編輯。不幸的是，IE只支持border-image，所以你需要在這種情況下找到一個替代方案。 – kojiro

也想到使用-webkit讓Safari和Google Chrome工作。

來源

2011-10-22 14:13:18

爲什麼不用3個div來代替？使用邊界爲背景是有點怪人的方法。

我會用

<div id="background-top"></div> 
<div id="menu"></div> 
<div id="backgroud-bottom"></div>

，然後都定義背景的他們...

來源

2011-10-22 14:14:07 sonia

爲了將圖像添加到元素的頂部和底部，邊框背景完全合適。調用解決方案*怪人*不是。 – kojiro

好吧，使用div的問題較少...通常設計師使用div來完成這些任務，換句話說 - 我還沒有看到用於添加背景的邊框方法。如果我試圖幫助，爲什麼這麼短？ – sonia

對不起，請稍候。這不是個人的，但你的回答並不回答O.P.的問題。它確實提供了一種替代方法，但避免他陳述的方法的唯一原因是它是*怪人*。它會改進這種寫法，以便描述避免邊界圖像方法的正當理由。 – kojiro

如何使CSS邊框圖像工作

回答

相關問題