Question

我正在处理包含多个图片的网页，但出于某种原因，只有其中一个图片加载。

以下是css的相关部分：

#Upper {
    width: 100%;
    height: 80%;
    margin: 0px;
    padding: 0px;
    background-image: url('Imgs/006-Code Geass.jpg');
    background-color: #ff6a00;
}

#Lower {  
    width: 100%;
    height: 18%;
    margin: 0px;
    padding: 0px;
}

#lft {
    width: 33%;
    left: 0;
    float: left;
    position:relative;
    background-image: url('Imgs/Camera.png');
    background-position: center;
    background-repeat: no-repeat;
}

#cnt {
    width: 33%;
    float: left;
    position: relative;
}

#rtg {
    width: 33%;
    float: right;
    position: relative;
}

#Footer {
    width: 100%;
    height: 2%;
    background-color: #ff6a00;
}

这是html：

<body>

    <div id="Upper">
        Trying to see you my friend
        <div>
            Cominudapp una red social hecha al tamaño de tu ciudad

        </div>

    </div>

    <div id="Lower">

        <div id="lft">
            Inscribir camara
        </div>

        <div id="cnt">
            Mapa de criminalidad
        </div>

        <div id="rtg">
            Comunidades seguras
        </div>

    </div>

    <div id="Footer">
        Hello World
    </div>

</body>

两个图像都在同一个文件夹中，但只显示Code Geass。这些图像绝不是最终的，一旦真实图像到达就会被更改，但我们需要显示这种图像。

编辑：

将高度更改为100％但仍然失败。关闭计算机以便在打开时正常工作。我不知道如何或为什么这样我才能提出问题。

Answer 1

图片实际上处于写入位置。你的html标签中的问题您没有指定任何固定宽度，只需使用＆＃39;％＆＃39;所以这里背景大小是文本区域的大小。

您可以将其检查为：

  <div id="lft">
    Inscribir camara<br>
    some text</br><br>
    some more text</br><br>
    more text</br>
 </div>

多个背景图像没有显示

1 个答案: