在我的 css 檔案中，我有一個名為“homehero”的 ID，它顯示了一個背景影像。
#homehero
{
background-image: url("images/coast.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
在我的 html 檔案中，我有一個 div 使用這個 id 來顯示影像；但是，影像不會出現。
<div id="homehero"> <!-- Home Page Image -->
<!-- <img src="images/coast.jpg" width="100%" height="100%" alt=" 不顯示背景圖片"> -->
<!-- Old line of html that displayed the same image, but converted to css id. -->
</div> <!-- End of Home Page Image -->
完整的 html 檔案可以在這里找到。
完整的 css 檔案可以在這里找到。
編輯：將影像設定為另一個元素的背景影像時會顯示該影像，僅在此 id 中出現問題。
uj5u.com熱心網友回復：
請把寬度和高度 寬度：100%；高度：100vh；
#homehero
{
background-image: url("images/coast.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
height:100vh;
}
uj5u.com熱心網友回復：
這些是我建議您嘗試的幾件事：
- 嘗試設定背景大小。（而不是%，試著把它設定為px。）大多數時候，背景圖片是應用的，但是因為我們的div沒有維度，我們無法查看它。
- 仔細檢查您的圖片檔案是否位于影像檔案夾中。
- 檢查影像的擴展名并確保您在代碼中使用了正確的擴展名。
- 使用開發工具檢查元素并查看背景屬性是否被另一個 CSS 規則覆寫。
如果以上方法都不起作用，請嘗試通過從 Internet 復制影像地址而不是提供檔案夾路徑來粘貼圖片的真實 URL。這種方法在 90% 的時間里都有效。
uj5u.com熱心網友回復：
我建議使用行內范圍 css，我希望它對你有用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="#homehero {.css">
<style>
#homehero {
background-image: url("image/image.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<div id="homehero">
</div>
</div>
</body>
</html>這可能是它發生的原因 https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/#:~:text=As Inline has the highest,sheets have the least priority。
uj5u.com熱心網友回復：
我建議進行以下更改，
#homehero
{
background-image: url("images/coast.jpg");
width:300px;
height:300px;
background-size: cover;
background-repeat: no-repeat;
}
在哪里，您的影像將被覆寫，如果您指定寬度和高度，它會很好，并且您的影像也不會重復，因為使用了 no-repeat 屬性。
uj5u.com熱心網友回復：
看起來您正在背景影像中輸入 url，背景大小使用background-size: cover;
如果您的 url 地址正確，請嘗試添加
width:100%;
height:100vh;
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/440322.html
上一篇：如何在顯示塊div中移動文本