Question

我想在包装元素的左侧和右侧添加边框图像，以便为其提供撕纸效果。

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

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

感谢。

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

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

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

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

Answer 1

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

.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>

Answer 2

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

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

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

2 个答案: