如何在包装器的左右两侧添加图像边框

Question

我想在包装器元素的左右两侧添加一个边框图像，使其具有撕纸效果。

我尝试过使用前后伪选择器，但无法使图像沿y轴重复。

达到预期结果的最佳方式是什么？

谢谢。

图片示例：https://i.stack.imgur.com/TRmqQ.png

为clarity编辑：以下是完整网站的截图：https://i.stack.imgur.com/YiHbg.jpg

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

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

Answer 1

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

演示 或jsfiddle

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>