How to give left and right padding/margin to repeated background in css3 multiple background?
What I want to do is exactly the same like in this article
http://css-tricks.com/css3-multiple-backgrounds-obsoletes-sliding-doors/
But in my case the left and right image is transparent. so repeated background is repeating in whole element. Is there any way to give right and left space?
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;
}
See live example here: http://css-tricks.com/examples/CSS3-Expanding-开发者_如何转开发Menu/
Take a look at this:
<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>
If you don't want use padding, you could also use an left-right border with rgba(0,0,0,0).
To understand how it work, visit: http://www.css3.info/preview/background-origin-and-background-clip/
With multiple backgrounds, the backgrounds are layered, so technically, each background takes up the whole element as dictated by the repeat value. If you have transparent parts in one of your backgrounds, then backgrounds under it will show through.
Depending on the look you're going for, if you're using CSS3 techniques anyway, why not play around with things like border-radius? Other than that, I suggest giving us an image of what you're trying to accomplish, and give us a jsfiddle, or live demo, of what's actually happening.
加载中,请稍侯......
精彩评论