border-imageプロパティにsvgパターンを追加する

Question

私のDIV要素の下端にSVGパターンを追加しようとしています。私が取ったアプローチは機能していません。 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; 
}