為什么背景圖像在一個地方有效，而在另一個地方卻沒有？

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 工作正常，唯一的問題是背景圖像。 當然，兩個 jpg 都在同一個位置。

我已經檢查過，它給出了“無法加載圖像”

Answer 1

根據您的描述，可能存在幾個問題。 例如，可能根本沒有應用該規則，因為#pageHeader不存在（無論出於何種原因，包括但不限於拼寫錯誤）。 或者該規則可能應用於#pageHeader ，但另一條規則覆蓋了background-image 。 此外，它可能位於iframe內，與圖片的相對位置不同（如果iframe內的頁面與主頁不在同一文件夾內，也不在同級文件夾中）。 此外，由於瀏覽器緩存（清除瀏覽器緩存）或服務器緩存系統（如 CloudFlare），未應用的規則可能不可用。

解決方法是右鍵單擊 HTML 標簽，單擊檢查並查看應用了哪些 CSS 規則。 如果應用了此規則，那么至少您知道您使用的是正確版本的 CSS，並且可以查看圖像的加載位置。 當您達到這一點時，解決方案應該是顯而易見的。

Answer 2

好的，所以解決方案是 - 我在 ubuntu 上使用 lampp，並且在某種程度上它不起作用，但是回到 windows xampp 解決了這個問題。 它可能是具有權限的東西。