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

【问题标题】：Why is background image not showing up for footer?为什么背景图片不显示在页脚中？
【发布时间】：2017-05-05 05:33:08
【问题描述】：

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

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

我的页脚：

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');
}

【问题讨论】：

现场演示：jsfiddle.net/fp4fye3a

标签： html css background-image

【解决方案1】：

为你的 div 编辑这个 css

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

因为它们都是同一个 div 的类，所以 .footerImage 和 .resume 之间应该没有差距

【讨论】：

【解决方案2】：

你申请的课程写错了。您需要使用.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>

【讨论】：

【解决方案3】：

删除 .footerImage 和 .resume 之间的空格

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

或者你可以使用

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

【讨论】：