將svg圖案添加到邊框圖像屬性

Question

我正在嘗試將SVG圖案添加到我的DIV元素的底部邊框。我採取的方法是行不通的。 Here is the code so far.。這是我創建SVG pattern的地方。最後這是我想在CSS中創建。

HTML

<div class="pattern"> 
    hello 
</div> 

CSS

.pattern{ 
    color:white; 
    width: 500px; 
    height: 500px; 
    border-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQYV2P8////f0ZGRkYGAgCsgBjFcJMIKUaxEp9iDLfhUoxVIcjd6B7E6Vt0k/EGC7JiguEHU0xQISycASOfKAejj1tDAAAAAElFTkSuQmCC 
)repeat; 
} 

Answer 1

也許你可以使用:after僞元素創建相同的效果：

.pattern{ 
    color:white; 
    width: 500px; 
    height: 500px; 
    position: relative; 
    top: 0; 
    left: 0; 
} 

.pattern:after{ 
    content: ""; 
    display: block; 
    height: 8px; 
    width: 100%; 
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQYV2P8////f0ZGRkYGAgCsgBjFcJMIKUaxEp9iDLfhUoxVIcjd6B7E6Vt0k/EGC7JiguEHU0xQISycASOfKAejj1tDAAAAAElFTkSuQmCC 
); 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}