Question

我在网页底部显示图片时遇到问题。

这就是我想要的：

但它无法加载图像。

这是我的代码：

的index.html

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/style.scss">
        <title>Hello World</title>
    </head>
    <body>
        <header class="header">
            Mon App de Météo
        </header>
        <section class="view">

        </section>
        <nav class="nav">
            <a href="#home"><i class="home"></i></a>
            <a href="#about"><i class="about"></i></a>
        </nav>
    </body>
</html>

的style.css

.header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    line-height: 60px;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    background-color: #11a7ab;
}

.nav{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #4f597b;
}

.home{
    background-image: url('../img/icon/home.png');
    background-repeat: no-repeat;
}

.about{
    background-image: url('../img/icon/about.png');
    background-repeat: no-repeat;
}

a{
    display: block;
    width: 50%;
    float: left;
}

这就是层次结构：

控制台没有显示任何错误，这让我想知道我做错了什么？

谢谢！

Answer 1

如果这是你的所有CSS，问题是空的<i>元素没有大小，因此背景图像有一个0x0空间可供使用。解决方案：明确地为i元素提供图标的大小。

显示图像CSS

1 个答案: