Question

为什么这不起作用？我该怎么改变它？

<div id="slider" class="middle">
</div>
#slider{
height:467px;
background:#eeeeee url(cercuri.png) no-repeat left top, url(cercuri2.png) no-repeat right top;
}

正如你所看到的，我想要一个背景颜色和两个图像，一个在左边，一个在右边。

Answer 1

将bg颜色放在第二个调用：

#slider{
    height:467px;
    background:url(http://lorempixel.com/400/200/) no-repeat left top, #eee url(http://lorempixel.com/400/200/) no-repeat right top ;
}

Answer 2

删除颜色并保留这样（对不起，我使用自己的图像，因为你在localhost上有你的图像）

#slider{
height:467px;
background-color:#eee;
background: url(http://c.dryicons.com/files/graphics_previews/sunset_landscape.jpg) no-repeat left top,  url(http://media-cdn.tripadvisor.com/media/photo-s/01/e4/f8/e6/another-view-of-landscape.jpg) no-repeat right top;

}

您可以看到fiddle here

Answer 3

尝试：

#slider{
    height:467px;    
    background: url('http://lorempixel.com/400/200/'), 
                url('http://lorempixel.com/400/200/');
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
    background-color: #eeeeee;
}

Answer 4

<div id="slider" class="middle">
    <div id="slider1" style="float:left;width:50%;display:inline-block"></div>
    <div id="slider2" style="float:left;width:50%;display:inline-block"></div>
</div>

#slider{
    height:467px;
}
#slider1{
    height:467px;
background:#eeeeee url(http://icons.iconarchive.com/icons/icons-land/vista-style-emoticons/256/Study-icon.png) no-repeat left top
}
#slider2{
 background:#eeeeee  url(http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png) no-repeat right top;   
height:467px;
}

CSS多背景问题

4 个答案: