图片不会出现在网页上

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， #second等

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

补充：实际上，如果您的目标不是任何需要背景图像的特殊解决方案，那么使用 img 标签而不是将图像用作背景图像更有意义。如果你坚持使用背景图像，你还必须定义它们的大小和 no-repeat.

图片不会出现在网页上

image won't appear on the webpage

html

css

background-image