css - 无法在位置绝对 div 上添加背景图片

Question

你能看看this demo吗？让我知道为什么我无法将图像添加到 #img-box

html, body {
    height:100%;
    width:100%;
}
#wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
#img-box {
    position: absolute;
    background-image: url("http://www.bluearthrenewables.com/wp-content/uploads/2014/12/7_Intake-Construction_CullitonCreek.jpg");
    top:0;
    left:0;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Answer 1

因为 #img-box 没有任何与之关联的宽度和高度。尝试定义

html, body {
    height:100%;
    width:100%;
}
#wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
#img-box {
    position: absolute;
    background-image: url("http://www.clker.com/cliparts/2/0/f/b/13873752061098664878happy_smiley-th.png");
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

<div id="wrapper">
    <div id="img-box"></div>
    <div id="tets"></div>
    <div id="tes3"></div>
</div>