Question

我有一个div，我想给它3个背景

background:url(../images/left-bg.png) no-repeat left,url(../images/right-bg.png) no-repeat right,url(../images/center-bg.png) repeat-x;

左右的背景图像是透明的，但因为我的中心背景图像是重复-x中心背景在左右背景下，是否有任何方法可以阻止此事件？

谢谢

Answer 1

它取决于更大的上下文 - CSS3有background-origin property决定你的背景是仅在内容框，填充框或边框之后绘制的。

如果您的左右图像本质上是边界的，那么content-box上的重复图像和padding-box / border-box上的左/右图像可能对您有帮助。

Answer 2

你可以像这个例子一样使用

body{
    background-image:url(http://lorempixel.com/200/100/) ,url(http://lorempixel.com/202/100/) ,url(http://lorempixel.com/203/100/);
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: left, right;
}

这是一个例子http://jsfiddle.net/2ju4g2p9/1/

Answer 3

It is possible to have 3 backgrounds using CSS3 , it is a new functionality added to CSS .

#multiple_bg{
    background-image: url(http://www.w3schools.com/css/img_flwr.gif), url(http://www.w3schools.com/css/paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}

  <div id="multiple_bg">
        <h1>Lorem Ipsum Dolor</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>

SUPPORT - [I.E :9.0],[CHROME:4.0],[MOZILLA 3.6 ],[SAFARI 3.1],[Opera 11.5]

多个背景图像CSS重复

3 个答案: