像素重復邊框圖像

Question

你好，我想知道是否有一種方法可以從1px的圖像制作邊框，但是重復，邊框寬度為13px。

得到這樣的輸出

謝謝

Answer 1

您可以通過2種方式執行此操作。

1。

由於您只有一個1px的圖像（顯然是1種顏色），因此rgba()在這里可能更合適：

border: 13px solid rgba(0, 0, 0, 0.5); /* use your colorcode */

2。

div { /* this is your div with the content in it */
    width: 300px;
    height: 300px;
    position: relative;
}

div:before { /* this will be your "border", it will be placed underneath your "content" div */
    content: "";
    position: absolute;
    top: -13px;
    left: -13px;
    width: 100%;
    height: 100%;
    padding: 13px;
    z-index: -1;
    background: url(your-border-image.png);
}

Answer 2

像這樣將圖像放入div中：

<div class="image">
    <img src="myimage.png" />
</div>

然后將邊框添加到該div：

.image {

    border: 13px solid rgba(220, 190, 148, 0.3);

}

瞧！

Answer 3

使用rgba顏色作為背景和邊框以產生這樣的效果：

background: rgba(234,198,152,.8);
border: 13px solid rgba(162,130,89,.5);

http://jsfiddle.net/feeela/c4ca46yo/

您可以擴展該示例，並通過@ font-face加載正確的字體，僅將背景圖像和石頭包括為真實圖像。 （使用IMG標簽或CSS背景圖片）