边框图像从像素重复

Question

你好我想知道是否有一种方法可以从1px但重复的图像制作边框，边框宽度为13px。

获得这样的输出

谢谢

Answer 1

您可以通过两种方式完成此操作。

<强> 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背景图像）