css使背景图像出现在元素的左侧和右侧

Question

我在带有分隔符的导航中有一个无序列表,如下所示:

background: {url("images/navseperator.png") no-repeat scroll right top transparent}

这工作正常,但我想在左边添加相同的图像,如下所示:

background: {url("images/navseperator.png") no-repeat scroll LEFT top transparent}

当我添加此行时,右侧的原始分隔符将消失,仅替换为左侧的分隔符.

如何将此背景图像添加到此元素的左侧和右侧？

Answer 1

CSS2 <仅支持一个背景图像.但是如果你使用的是css3,

background: url("images/navseperator.png") no-repeat scroll right top transparent, url("images/navseperator.png") no-repeat scroll LEFT top transparent;

对于css2,

<div class="left">
    <div class="right">
        content here
    </div>
</div>

.left{
    background: url("images/navseperator.png") no-repeat scroll LEFT top transparent;
}
.right{
    background: url("images/navseperator.png") no-repeat scroll right top transparent
}