为什么背景图片不显示在页脚中？

Question

如下图所示，我的页脚 footerImage div 的背景图片没有显示，即使有明确定义的高度 (50px) 和宽度 (100 %) 对于 div，如绿色边框所示。为什么？我该如何解决这个问题？

注意：这不是图像路径问题，因为我可以在括号中拉出图像的预览。

我的页脚：

HTML:

<ul>
    <li>
        <a href="" target="_blank"> <figure>
            <div class = "footerImage resume"> </div>
            <figcaption>Resume</figcaption>
        </figure></a>
    </li>
</ul>

CSS:

.footerImage {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 100%;
    height: 50px;
    border: 1px solid green;
}

.footerImage .resume {
    background-image: url('../images/resume.png');
}

Answer 1

为您的 div

编辑此 css

.footerImage.resume {
    background-image: url('../images/resume.png');
}

因为它们都是类的同一个 div 它们应该在 .footerImage 和 .resume

之间没有差距

Answer 2

您申请的class写错了。您需要使用 .footerImage.resume 而不是 .footerImage .resume 请查看示例代码。

<!DOCTYPE html>
<html>

<head>
    <style>
        .footerImage {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;
            width: 100%;
            height: 50px;
            border: 1px solid green;
        }
        
        .footerImage.resume {
            background-image: url('http://weknowyourdreams.com/images/bird/bird-06.jpg');
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="" target="_blank">
                <figure>
                    <div class="footerImage resume"> </div>
                    <figcaption>Resume</figcaption>
                </figure>
            </a>
        </li>
    </ul>
</body>

</html>

Answer 3

删除 .footerImage 和 .resume 之间的 space

.footerImage.resume {
    background-image: url('../images/resume.png');
}

或者你可以直接使用

.resume {
    background-image: url('../images/resume.png');
}

为什么背景图片不显示在页脚中？

Why is background image not showing up for footer?

html

css

background-image