CSS3：如何讓半透明的邊框圖像顯示背後的邊框顏色

我有一個20px右邊框的包裝div。我設置了邊框顏色，然後是帶有半透明png的邊框圖像。我做到了這一點，可以通過javascript改變下面的顏色，同時保持png的紋理。但「背景」邊框顏色變成白色，只要我使用邊框圖像規則，或消失在所有...CSS3：如何讓半透明的邊框圖像顯示背後的邊框顏色

的HTML很簡單：

<div class="wrapper clearfix"> 
... 
</div>

和CSS：

.wrapper{float: left; min-height: 100%; border-right: 20px solid lime url('../img/elastic.png'); position: relative;}

謝謝你們的幫助

（第一篇文章在這裏這個了不起的社區，希望能得到很好）

2011-05-02 Fhuel

爲了更容易測試，你可以創建一個[jsFiddle測試用例]（http://jsfiddle.net/）？你可以將你的'elastic.png'上傳到[http://imgur.com/]（http://imgur.com/）。 – thirtydot 2011-05-02 18:02:32

對不起，但border-image並不意味着與border-color結合使用。

按照W3C：

「的‘邊界圖像’屬性指定的圖像使用，而不是由‘邊框樣式’性能給出邊框樣式」。

正如你可以看到這個Fiddle，任何邊框樣式都被忽略。只有邊框寬度有一些效果。

我建議你爲每個你想要的邊界創建特定的圖像。

2011-05-02 18:07:39

ahww ...我怕這種答案... 無論如何，謝謝你的幫助。我認爲我會按照你的建議去做 – Fhuel 2011-05-02 19:37:51

所以...既然這麼煩人的責任是W3C，那麼如何將我的答案標記爲正確？大聲笑。 – 2011-05-03 01:14:42

正如ErickPetru所說，當使用border-image時，border-color被忽略。

我唯一可以提出的解決方案是使用在data：URI中編碼的border-image中的SVG。這樣，你可以通過JS操縱它並應用結果。或者，使用畫布元素動態生成位圖圖像，並將其用作邊框圖像。

希望有所幫助。 :)

2011-05-03 14:10:43

回答