Question

嘿。我想在css的不同位置放置多个背景图像（比如diff px。和diff z-index。）这在身体标签中是否可行。我是指身体标签中的所有图像。或者使用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;}

并且我想为每个班级添加背景图片。请更正代码。并在上面的所有条目中添加背景图片

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）并为它们设置背景图像。

Answer 2

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

.nav {background-image:url(img/button.gif);
position:absolute;
top:267px;
left:149px;
z-index:1}
.home   {background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:285px;
     z-index:2;}

.event  {background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:389px;
     z-index:2;}

.sponsors{background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:493px;
     z-index:2;}

.about  {background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:597px;
     z-index:2;}

.register{background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:701px;
     z-index:2;}

.more   {background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:805px;
     z-index:2;}

.box    {background-image:url(img/button.gif);position:absolute;
     top:1163px;
     left:157px;
     z-index:1;}

我没有得到它..请纠正这个

Answer 3

你不能没有默认的宽度和高度。

仅当图像在div中时，例如。 <div> <img src='image.jpg'> </div> div占用图像的大小。但即便如此，我也不确定这是否会发生在绝对的div中。

使用像rahul建议的css3或给div（如前所述）宽度和高度。

CSS-多重背景图像

3 个答案: