CSS-多背景图像 [英] CSS- multiple background image

问题描述

嘿。我想把多个背景图像在css在不同的位置（例如在diff px和diff z-index。）
在body标签中是可能的。我的意思是身体标签中的所有图像。或与差异ids。？

Hey. I want to put multiple background image in css at different position(like at diff px. and at diff z-index.) Is that possible in body tag. i mean all images in body tag. or with diff ids.?

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;}

图片 。
请更正代码。并在上面所有clases中添加背景图片

and for each class i want to add a background image . please correct the code. and add background image in all clases above

推荐答案

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

In CSS 3 you can use multiple backgrounds. But it isn't widely supported yet. Like

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;

请参阅 多个背景

See multiple backgrounds

您可以使用不同的容器（div）为他们。

You can use different containers (div) and set the background images for them.

这篇关于CSS-多背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！