要在Y左边和Y右边重复的多个背景图像

我试图在背景中完全像本网站一样重复两个图像（右侧的一个阴影图像，其他左侧的图像）。要在Y左边和Y右边重复的多个背景图像

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

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

我检查了该网站的代码，并且我希望用阴影图像。我试图复制优雅的主题使用在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权这样的：

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主题？

感谢您的阅读。

来源

2012-07-24 user1547932

我认为你可以使用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

来源

2012-07-24 09:04:10

这里有一个方法，你可以做到这一点。不使用背景。尽管您可以将图像作为背景放在div上，或者只是将它们添加为div内的图像。你甚至可以删除divs，并使用图片而不是div。

http://jsfiddle.net/6UEXc/

希望有所帮助。

来源

2012-07-24 09:07:02

要在Y左边和Y右边重复的多个背景图像

回答

相关问题