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