Question

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

注意：这不是图像路径问题，因为我可以在Brackets中提取图像的预览。

我的页脚：

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

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

＆＃13;

<!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>

＆＃13;

Answer 3

删除.footerImage和.resume

之间的空格

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

或者您可以使用

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

为什么背景图片没有显示页脚？

3 个答案: