Question

我在互联网上搜索过，发现将body, html height, width设置为100％可以解决问题，但事实并非如此。我有这个HTML：

<body>
    <div class="container index">
        <div class="row">
            <div class="buttons">

                <!--learn alphabets button-->
                <a>
                    <div class="col-3 learn">
                        <p>
                            Learn
                        </p>
                    </div>
                </a>
            </div><!--buttons end here-->
        </div><!--row ends here-->
    </div><!--container ends here-->

</body>

和我的css：

.index{
    background-image: url("../images/index-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

我已经定义了body和html的宽度和高度：

html, body { height: 100%; width: 100%;}

但除非我在.index中设置px的高度，否则图片不会显示为什么会这样？

Answer 1

您的.index div没有应用高度。背景只会与div包含的内容一样高。

.index {
    background-image: url("../images/index-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100%;
}

Answer 2

拉伸.index容器以填充身体的空间，否则它只会与内部的内容一样高。

 html,
 body {
     height: 100%;
     width: 100%;
 }
 .index {
     background-image: url("http://lorempixel.com/g/500/500");
     background-size: cover;
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
 }

DEMO：http://jsfiddle.net/64917998/1/

Answer 3

你必须给你的NSMutableSet班级一个高度。静态或动态。

.index

Jsfiddle

背景图像没有显示在CSS中

3 个答案: