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>

See this fiddle

Answer 2

尝试以下代码，将background更改为background-image，

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

Answer 3

请参阅this one。尝试使用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大小是否正确（是否有宽度...？）