如何在css3多重背景中为重复背景提供左右填充/边距？_Css_Css Sprites_Background Image

如何在css3多重背景中为重复背景提供左右填充/边距？

css

如何在css3多重背景中为重复背景提供左右填充/边距？,css,css-sprites,background-image,Css,Css Sprites,Background Image,我想做的与本文中完全相同但在我的例子中，左右图像是透明的。所以重复的背景在整个元素中重复。有没有办法给左右的空间 HTML <ul> <li class="expanding">Went To The Market</li> </ul> 请参见此处的实时示例：对于多个背景，背景是分层的，因此从技术上讲，每个背景都按照重复值的指示占据整个元素。如果你的背景中有一个透明的部分，那么它下面的背景就会显示出来根据您想要的外观，如果您使用的是

我想做的与本文中完全相同

但在我的例子中，左右图像是透明的。所以重复的背景在整个元素中重复。有没有办法给左右的空间

HTML

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

请参见此处的实时示例：

对于多个背景，背景是分层的，因此从技术上讲，每个背景都按照重复值的指示占据整个元素。如果你的背景中有一个透明的部分，那么它下面的背景就会显示出来

根据您想要的外观，如果您使用的是CSS3技术，为什么不使用边界半径之类的东西呢？除此之外，我建议给我们一张您试图完成的图像，并给我们一个JSFIDLE，或是实际发生的事情的现场演示。

看看这个：

<html>
<head>
<style type="text/css">
li {
    background: url(http://www.w3schools.com/images/w3css.gif) repeat-x;
    padding:0px 20px;
    outline:1px solid red;
    background-clip:content-box;
}
</style>
</head>
<body>
<ul>
        <li>Went To The Market</li>
</ul>
</body>
</html>


李{
背景：url(http://www.w3schools.com/images/w3css.gif)重复-x；
填充：0px 20px；
轮廓：1px纯红；
背景剪辑：内容框；
}

去市场

如果不想使用填充，还可以使用带有rgba（0,0,0,0）的左右边框

要了解它是如何工作的，请访问：

展示一些代码配合。HTML以及CSS。最好使用jsfiddle这些属性中的一个可能对您有所帮助：-但我目前还不太理解您的问题。也许如果你展示了一个坏掉的测试用例（JSFIDLE），我就可以解决它。我也有同样的问题，你是如何解决的？你可以将图像居中并设置左右填充。

<html>
<head>
<style type="text/css">
li {
    background: url(http://www.w3schools.com/images/w3css.gif) repeat-x;
    padding:0px 20px;
    outline:1px solid red;
    background-clip:content-box;
}
</style>
</head>
<body>
<ul>
        <li>Went To The Market</li>
</ul>
</body>
</html>