css 如何得到一个半透明的边框图像来显示它后面的边框颜色？

wn9m85ua 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(166)

我有一个带有20 px右边框的 Package 器div，我设置了一个border-color，然后设置了一个带有半透明png的border-image。
我这样做是为了能够通过JavaScript改变下面的颜色，同时保持png的纹理。但是，一旦我使用了border-image规则，“背景”边框颜色就会变成白色，或者完全消失。
HTML代码简单明了：

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

以及CSS：

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

css

来源：https://stackoverflow.com/questions/5860433/how-to-get-a-semi-transparent-border-image-to-show-the-border-color-behind-it

2条答案

按热度按时间

v8wbuo2f1#

抱歉，border-image不能与border-color一起使用。
根据W3C：
“border-image”属性指定要使用而不是“border-style”属性给定的边框样式的图像。
正如你在JSFiddle中看到的，所有的边框样式都被忽略了，只有边框宽度有一些影响。
我建议你为你想要的每个边框创建特定的图像。