多个背景图像在 Y 左和 Y 右重复答案

【问题标题】：Multiple Background Images To Repeat on Y left and Y Right多个背景图像在 Y 左和 Y 右重复
【发布时间】：2012-07-22 12:56:52
【问题描述】：

我正在尝试让两个图像在背景中重复（一个在右边，另一个在左边），就像这个网站一样。

到目前为止，我无法正确获取 CSS 代码：

http://www.elegantthemes.com/preview/Modest/

我检查了该网站的代码并获得了我希望使用的阴影图像。我试图复制优雅主题在运行 Headway 的 WordPress 网站上使用的代码：

.right-shadow { background: #ffffff url(images/right-shadow.png) repeat-y top right; }
.left-shadow { background:url(images/left-shadow.png) repeat-y top left; }

但它不起作用。

然后我尝试了：

body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top;}

这适用于正确的阴影图像 - 它显示正确

然后我尝试了

body {background:#ffffff url(http://websitebuddha.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}

这适用于左侧阴影图像 - 它显示正确

现在，当我尝试合并代码以显示沿 Y 左侧和 Y 右侧的两个阴影图像时：

body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top, url(http://website.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}

它不起作用 - 两个图像都没有出现

我也试过这个：

body {
    background-image: url(http://website.com/wp-content/uploads/2012/07/right-shadow.png), (http://website.com/wp-content/uploads/2012/07/left-shadow.png);
    background-repeat: repeat-y right top, repeat-y left top;
}

这也不起作用 - 两个图像都没有出现

我怎样才能让它与优雅主题的 Modest Theme 完全一样？

感谢阅读。

【问题讨论】：

标签： image css background

【解决方案1】：

我认为您可以使用Multiple Backgrounds 作为您的解决方案。

背景属性已经过大修以允许multiple backgrounds in CSS3。

CSS

body {
background: url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png) 0 0 repeat-y,  
 url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png)center right repeat-y;  
}

希望对您有所帮助：- http://tinkerbin.com/Iw4yJ1H3

【讨论】：

【解决方案2】：

这是您可以做到的一种方法。不使用这样的背景。尽管您可以将图像作为背景放置在 div 上，或者只是将它们作为图像添加到 div 中。你甚至可以取消 div 并简单地使用图像而不是 div。

http://jsfiddle.net/6UEXc/

希望对您有所帮助。

【讨论】：