Question

我正在尝试在背景中重复显示两个图像（右侧是一个阴影图像，另一个是左侧），就像这个站点一样。

到目前为止，我无法正确使用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完全一样？

感谢阅读。

Answer 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

Answer 2

这是你可以做到的一种方式。不使用背景。虽然您可以将图像作为背景放在div上，或者只是将它们作为图像添加到div中。你甚至可以取消div并且使用图像而不是div。

http://jsfiddle.net/6UEXc/

希望有所帮助。

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

2 个答案: