如何給css3多背景的左右填充/邊距重複背景？

我想要做的是完全一樣的相同這篇文章如何給css3多背景的左右填充/邊距重複背景？

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/

來源

2011-05-05 Jitendra Vyas

顯示一些代碼隊友。 HTML以及CSS。更好地使用jsfiddle – Jawad 2011-05-05 13:18:24

其中一個屬性可能可以幫助你：http://www.w3.org/TR/css3-background/#backgrounds - 但我現在不瞭解你的問題。也許如果你展示了一個破解的測試用例（jsFiddle），我可以弄明白。 – thirtydot 2011-05-06 10:02:52

我有同樣的問題，你是如何解決它的？ – Muflix 2013-10-12 17:23:20

隨着多背景，背景是分層的，所以理論上講，每個後臺佔用整個元素由重複值決定。如果您的某個背景中有透明部分，則其下的背景將顯示出來。

根據你要看的外觀，如果你使用CSS3技術，爲什麼不玩弄邊界半徑的東西呢？除此之外，我建議給我們一個你想要完成的事情的形象，並給我們一個實際發生的事情或現場演示。

來源

2011-05-05 18:11:41 Shauna

在此請看：

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

來源

2011-05-06 15:29:24 cvsguimaraes

如何給css3多背景的左右填充/邊距重複背景？

回答

相關問題