css样式未应用于html中的div

。导航卡{
背景图像：url（“https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png");
背景重复：无重复；
背景位置：中心；
高度：1000px；
宽度：700px；
}

网页组件

您使用图像作为背景，但您没有设置背景大小，您只是设置容器大小，因此您必须向css类添加下一条规则：

background-size: contain;

或

发件人：

---

“包含”->调整背景图像的大小，以确保图像完全可见

之所以不居中，是因为您已将容器的宽度设置为仅300px。图像占据了整个宽度。如果将宽度从导航卡上移除，它将居中

或者，您可以将以下样式添加到卡中，它将居中

margin: 0 auto;

那么你最终会得到这个

.navigation-card {
    background-image: url("https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png");
    background-repeat: no-repeat;
    background-position: center;
    height: 300px;
    width: 300px;
    margin: 0 auto;
}

---

要使背景图像居中，应添加边距：50%自动；使图像位于页面或页边距的中心：0自动；要使其位于顶部

请检查图像的路径，它可能是错误的路径。控制台怎么说？有错误吗？@Konrud我尝试了相对路径和绝对路径，并多次检查了路径。我没有看到任何错误。@user1232138在开发人员工具的控制台中。按F12。顺便说一下，路径名中的反斜杠是不受欢迎的。使用前斜杠。顺便说一下，如果我把你的源代码放进去，它会工作，但它不会把div放在屏幕中央。你能澄清你所说的“它应该在中心显示一个图像，但它不是”的确切含义吗？你看到图像了吗，是还是不是？我也喜欢这个答案。这是一个很好的替代我的，谢谢分享。

.navigation-card {
    background-image: url("https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png");
    background-repeat: no-repeat;
    background-position: center;
    height: 300px;
    width: 300px;
    margin: 0 auto;
}