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

【问题标题】：How is it possible to add an image border to the left and right of a wrapper?如何在包装器的左侧和右侧添加图像边框？
【发布时间】：2014-09-10 04:13:07
【问题描述】：

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

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

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

谢谢。

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

为清晰而编辑：这是整个网站的截图：http://i.imgur.com/IpifJyd.jpg

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

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

【问题讨论】：

标签： html border pseudo-class css

【解决方案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">

【讨论】：

【解决方案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>

【讨论】：

抱歉不够清楚，我已经用更大的屏幕截图更新了原始帖子，更好地说明了我想要实现的目标。感谢您的意见。