1

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

到目前为止，我无法正确获取 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;
}

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

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

谢谢阅读。

4

2 回答 2

0

我认为您可以使用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-24T09:04:10.597 回答
0

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

http://jsfiddle.net/6UEXc/

希望有帮助。

于 2012-07-24T09:07:02.203 回答