如何在包装器的左边和右边添加图像边框？

Question

我想在包装器元素的左边和右边添加一个边框图像，以使它具有撕掉的纸张效果。

我试过使用前后的伪选择器，但是我无法得到沿着y轴重复的图像。

达到预期效果的最佳方法是什么？

谢谢。

图像示例：http://i.imgur.com/9f5Y8bi.png

为clairty编辑:以下是完整站点的截图：http://i.imgur.com/IpifJyd.jpg

我想把当前纸张纹理的撕裂图像放在主包装纸的左右两侧，并沿y轴重复，使包装纸具有撕裂的效果。

目前，它只是一个盒子-影子。

Answer 1

你可以试试这个，我希望它能对你有用。

http://jsfiddle.net/THE_j/zz2urbp9/或小提琴

css-

body{background: url(body/background/image/path);}
.wrapper{height: 316px;width: 700px;position:relative;background: url(your/background/image/path);margin: 0 auto;border-right:1px solid #333;border-left:1px solid #333;}
.wrapper:before{background: url(transparent/shadow/image/path);content: '';position: absolute;height: 100%;width: 43px;left:-44px;}
.wrapper:after{background: url(second/transparent/shadow/image/path);content: '';position: absolute;height: 100%;width: 43px;right:-44px;}

html:-

<div class="wrapper">

Answer 2

如果我理解您要求的是什么，您应该能够通过添加一个带有背景图像的包装器来达到预期的效果，如下所示：

.wrapper {
    padding:0 15px; /* Set the left and right to the width of the border you desire */
    background: url('path/to/border/image.png') repeat;
}

<div class="wrapper">
    <img src="/path/to/facing/image.png" />
</div>