多個背景圖片CSS重復

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;

左右的背景圖像是透明的，但是由於我的中心背景圖像是repeat-x，所以中心背景位於左右背景之下，有什么辦法可以阻止此事件？

謝謝

Answer 1

這取決於更大的上下文-CSS3具有background-origin屬性 ，該屬性確定背景是僅繪制在內容框，填充框還是邊框的后面。

如果您的左右圖像本質上是帶邊框的，那么在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]