css - 为什么背景简写不适用于 ID？

Question

我不知道为什么这对 ID 不起作用。如果我将#slide1 更改为 body，它就可以工作。这里发生了什么事？谢谢。

fiddle :http://jsfiddle.net/Q43Sm/1/

<div class="foo">
    <div id="slide1"></div>
    <div id="slide2"></div>
    <div id="slide3"></div>
</div>

CSS

.foo { display: inline-block; }

#slide1 { background: url('http://lorempixel.com/400/200/sports/1') no-repeat top; }
#slide2 { background: url('http://lorempixel.com/400/200/sports/2') no-repeat top; }
#slide3 { background: url('http://lorempixel.com/400/200/sports/3') no-repeat top; }

Answer 1

尝试向您的 div 添加一些 CSS？

JSfiddle

 .foo {
    display: inline-block;
}
#slide1 {
    background: url('http://lorempixel.com/400/200/sports/1') no-repeat top;
    width:100px;
    height:100px;
}
#slide2 {
    background: url('http://lorempixel.com/400/200/sports/2') no-repeat top;
    width:100px;
    height:100px;
}
#slide3 {
    background: url('http://lorempixel.com/400/200/sports/3') no-repeat top;
    width:100px;
    height:100px;
}