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

看看这个：

<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>

如果你不想使用填充，你也可以使用rgba（0,0,0,0）的左右边框。

要了解其工作原理，请访问：http://www.css3.info/preview/background-origin-and-background-clip/

Answer 2

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

根据你想要的外观，如果你还在使用CSS3技术，为什么不玩边框半径？除此之外，我建议给我们一个你想要完成的事情的图像，然后给我们一个关于实际发生的事情的现场演示。

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

2 个答案: