将svg模式添加到border-image属性

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;  
}