div中未顯示背景圖片

Question

 .jumbotron { margin-bottom: 0px; height: 350px; color: white; text-shadow: black 0.3em 0.3em 0.3em; } 

 <div class="jumbotron" style="background: url('~/images/hdpic.jpg') no-repeat; background-size:cover"> </div> 

我的圖片網址是正確的，但我現在不知道為什么它不起作用。 如果有人知道，請幫助我。 謝謝。

Answer 1

檢查您的背景圖片路徑，我已經用另一個圖片路徑替換了它，並且可以正常工作。

也許用類似../的相對路徑代替' ~ '

<div class="jumbotron" style="background: url('https://picsum.photos/200/300') no-repeat; background-size:cover">
</div>

看到這個小提琴

Answer 2

嘗試以下代碼，將background更改為background-image ，

<div class="jumbotron" style="background-image: url('~/images/hdpic.jpg') no-repeat; 
background-size:cover">
</div>

Answer 3

請參考這一章 。 嘗試使用background-image 。 見下文：

 .jumbotron { margin-bottom: 0px; height: 350px; color: white; text-shadow: black 0.3em 0.3em 0.3em; } 

 <div class="jumbotron" style="background-image: url('~/images/hdpic.jpg') no-repeat; background-size:cover"> </div> 

Answer 4

嘗試這個

<div class="jumbotron" style="background-image: url('~/images/hdpic.jpg') no-repeat; background-size:cover">
</div>

使用background-image而不是background 。

Answer 5

后台CSS邏輯似乎很好。 然后，您應該使用瀏覽器的檢查器檢查顯示的div大小是否正確（是否有寬度...？）