Question

我不知道为什么这对ids不起作用。如果我将＃slide1更改为body，则可以正常工作。这里发生了什么事？谢谢。

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

Answer 2

身体是一个很大的区域。好吧，不是真的。身体没有内容，所以背景不会显示。但html（自动膨胀到视口高度）继承（向后）背景。只是一些没有高度的随机div不会产生这种效果。

您可以通过使随机div及其父亲身高100%为其提供高度。对于这种情况（如果您希望图像为视口的100％height和width），

html, body, .foo, .foo * { height: 100% }

由于您的div.foo为inline-block，因此您还需要将其设为width: 100%。

Answer 3

因为它们没有宽度和高度。看看修改过的小提琴：

.foo { display: inline-block; }

#slide1 {
    width:100px;
    height:100px;
    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; }

http://jsfiddle.net/Q43Sm/2/

Answer 4

     .foo { 
             display: block;height:200px;width:100px;border:1px solid red;
      }

为什么背景速记不适用于ID？

4 个答案: