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

回答