image - 多个背景图像在 Y 左和 Y 右重复

Question

我正在尝试让两张图片在背景中重复(一张阴影图片在右边，另一张在左边)，就像这个网站一样。

到目前为止，我无法获得正确的 CSS 代码:

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

我检查了该站点的代码并获得了我希望使用的阴影图像。我试图复制 Elegant Themes 在运行 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;
}

这也行不通 - 两个图像都不会出现

我怎样才能让它像在 Elegant themes 的 Modest Theme 中一样工作？

感谢阅读。

Answer 1

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

背景属性已经过彻底修改以允许 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