html – 为什么背景图像没有特定的宽度和高度显示？

这是一个示例代码

我一直想知道为什么背景图像不会显示,除非我特定图像的宽度和高度(以像素为单位).我试图仅以百分比为单位指定宽度,但它不起作用. w3cschools.com能够显示背景图像而不指定宽度和高度,但它仅适用于身体背景.任何解释或解决方案解决方法？

HTML

<div class="pic"></div>

CSS

.pic {
  background: url("http://i.imgur.com/HIt6f8r.png") no-repeat;
  display: block;
  position: relative;
  width: 244px;
  height: 230px;
  background-size: contain;
}

解决方法

你的< div> element没有任何内容,所以< div>高度是0px. < div>的宽度仍然是100％. 如果您向div添加任何内容,它将具有一些高度,它将显示图像的一部分. <身体GT;默认情况下具有窗口的高度,因此您可以看到背景图像.