Question

我正在制作一些自定义wordpress主题，在我的style.css中，我有两个地方，我正在使用背景图像，这里工作正常：

 #gallery {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("img/gallery.jpg");
min-height: 100vh;
padding-top: 50px;
color: white;
text-align: center;
}

但这里没有显示：

#pageHeader {
background-image: url("img/pageHeader.jpg");
overflow: auto;
overflow-y: hidden;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}

第二个是page.php文件，其他函数如text-align工作正常，只有问题是background-image。当然两个jpgs都在同一个位置。

我已经检查过，它会显示“无法加载图片”

Answer 1

根据您的描述，可能会出现几个问题。例如，该规则可能根本没有应用，因为#pageHeader不存在（无论出于何种原因，包括但不限于拼写错误）。或者规则可能会应用于#pageHeader，但其他规则会覆盖background-image。此外，它可能位于iframe内，与图片的相对位置不同（如果iframe内的页面不在与主页相同的文件夹内，而不在兄弟文件夹或）。此外，由于浏览器缓存（清除浏览器缓存）或服务器缓存系统（如CloudFlare），未应用的规则可能不可用。

解决方案是右键单击HTML标记，单击Inspect并查看应用了哪些CSS规则。如果应用此规则，那么至少您知道您使用的是正确版本的CSS，并且可以查看从中加载图像的位置。当你达到这一点时，解决方案应该是显而易见的。

Answer 2

好的，所以解决方案是 - 我在ubuntu上使用lampp，并且在某种程度上它不起作用，但回到windows xampp解决了这个问题。它可能是具有权限的东西。

为什么背景图像在一个地方工作但在另一个地方不工作？

2 个答案: