Question

我写了这个简短的代码，但我的背景图片根本没有出现..这很奇怪，因为如果我改变例如宽度和高度'px'就显示了

我试图用屏幕的全长显示背景图像并适合div标签有什么建议吗？

<!DOCTYPE HTML>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
        <title>My Web Page</title>

        <style>



        .hola {
            width:100%;
            height: 100%;
            background-image: url('../Img/imagenes/fotoportada.jpg');
            background-size: cover;


            background-repeat: no-repeat;
            }

        </style>
    </head>

    <body>
    <div class="hola">

    </div>
    </body>

</html>

Answer 1

元素的高度指定为100%。

这是根据其父元素计算的，即auto（默认值）。

CSS将100%的{{1}}定义为auto，因此该元素的高度足以包含其内容。

它没有内容，所以这是auto。

这没有给出渲染图像的高度。

您可能希望在元素及其所有祖先（0px和min-height）上设置100% body。

Answer 2

如果没有内容且使用百分比，div将没有宽度或高度。背景图像不计入内容。

Answer 3

只需添加位置：绝对; 它会按你的意愿工作

.hola {
            width:100%;
            height: 100%;
            background-image: url('../Img/imagenes/fotoportada.jpg');
            background-size: cover;
            position:absolute;

            background-repeat: no-repeat;
            }

Answer 4

您可以尝试：

body {
    background: url('../Img/imagenes/fotoportada.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

为什么我的图片没有出现Html？

4 个答案: