Question

我在html上添加了一些图片，但它没有显示在网页上。图像的目录路径是正确的，第一张图像出现在我添加其余图像之前。我认为这与高度有关，所以我在css上增加了高度，但仍然没有。

不确定在没有图像的情况下是否有帮助，但我已粘贴下面的代码：

<section class="pictures">
        <div class="container">
            <div class="row1">
                <div id="first" class="img1" style="background-image:url(images/page-1_img1.jpg);">
                </div>
                <div id="second" class="img2" style="background-image:url(images/page-1_img2.jpg);">
                </div> 
            </div>
            <div class="row2">
                <div id="third" class="img3" style="background-image:url(images/page-1_img3.jpg);">
                </div>
                <div id="fourth" class="img4" style="background-image:url(images/page-1_img4.jpg);">
                </div>
                <div id="fifth" class="img5" style="background-image:url(images/page-1_img5.jpg);">
                </div>
            </div>
        </div>
    </section>

CSS：

.container {
    height: 500px;
    width:1024px;
}

谢谢。

Answer 1

由于您将图像用作背景图像，因此您必须为其所有容器定义至少height（最好也是width），即#first，{{ 1}}等等。

否则（因为他们没有任何其他内容）这些元素的高度为零，因此背景图像将保持不可见

添加：实际上，如果您不是针对需要背景图像的任何特殊解决方案，那么使用#second标签而不是将图像用作背景图像更有意义。如果您坚持使用背景图片，则还必须定义其尺寸和img。

图片不会出现在网页上

1 个答案: