如何在css3多个背景中为重复的背景赋予左右填充/边距？

Question

我想要做的与本文完全一样

http://css-tricks.com/css3-multiple-backgrounds-obsoletes-sliding-doors/

但就我而言，左右图像是透明的。因此重复的背景在整个元素中都是重复的。有什么办法可以给左右空间吗？

的HTML

<ul>
    <li class="expanding">Went To The Market</li>
</ul>

的CSS

li.expanding {
    background: url('left.jpg') top left no-repeat,
        url('right.jpg') top right no-repeat,
        url('middle.jpg') top center repeat-x;
    height: 40px;
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 20px;
    float: left;
}

在此处查看实时示例：http : //css-tricks.com/examples/CSS3-Expanding-Menu/

Answer 1

对于多个背景，背景是分层的，因此从技术上讲，每个背景根据重复值占据整个元素。如果您的背景之一中有透明部分，则其下方的背景将显示出来。

根据您想要的外观，如果您无论如何都使用 CSS3 技术，为什么不尝试一下 border-radius 之类的东西呢？除此之外，我建议向我们提供您想要实现的目标的图像，并为我们提供实际发生情况的 jsfiddle（或现场演示）。