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

Question

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

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

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

谢谢。

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

为清晰起见而编辑:这是目前为止完整站点的屏幕截图:http://i.imgur.com/IpifJyd.jpg

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

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

Answer 1

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

Demo 或 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">