CSS-多背景图像

Question

嘿。我想在 css 中的不同位置放置多个背景图像(例如在 diff px. 和 diff z-index 处。)在 body 标签中可以吗？我的意思是 body 标签中的所有图像。或具有差异 ID。？

body    {background-image:url(img/banner.png);
     background-position: 50% 49px;
     background-repeat:no-repeat;
     background-color:#000000}

.nav {position:absolute;
top:267px;
left:149px;
z-index:1}

.home   {position:absolute;
     top:281px;
     left:285px;
     z-index:2;}

.event  {position:absolute;
     top:281px;
     left:389px;
     z-index:2;}

.sponsors{position:absolute;
     top:281px;
     left:493px;
     z-index:2;}

.about  {position:absolute;
     top:281px;
     left:597px;
     z-index:2;}

.register{position:absolute;
     top:281px;
     left:701px;
     z-index:2;}

.more   {position:absolute;
     top:281px;
     left:805px;
     z-index:2;}

.box    {position:absolute;
     top:1163px;
     left:157px;
     z-index:1;}

对于每个类，我想添加一个背景图像。请更正代码。并在上面的所有类中添加背景图片

Answer 1

在 CSS 3 中，您可以使用多个背景。但它尚未得到广泛支持。喜欢

background: url(body-top.gif) top left no-repeat, 
            url(banner_fresco.jpg) top 11px no-repeat, 
            url(body-bottom.gif) bottom left no-repeat, 
            url(body-middle.gif) left repeat-y;

参见multiple backgrounds

您可以使用不同的容器(div)并为它们设置背景图像。