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＆LT;只支持一个背景图片。但如果您使用的是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
}