我试图将图像放在某些div标签下，但是当没有文本时，它根本不会显示，那么我如何才能强制div显示图像背景的整个大小呢?
<html>
<head>
<title> This is an demo </title>
<style>
.board {
background: url('1.jpg') no-repeat;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="board">Pic</div>
<div class="board">Pic</div>
<div class="board">Pic</div>
<div class="board">Pic</div>
</div>
</body>
</html>
我试过background-size，它根本不起作用(cover/contain)
您必须根据图像的大小来固定<div>的尺寸。否则它不会显示
类似于
.board {
min-width: 300px;
min-height: 400px;
display: block;
}
<子>注:
- 尽量避免使用min-height或min-width。使用高度&宽度而不是
我选min-width和min-height。
所以你设置图像的宽度和高度分别为div的min-width和min-height。
将它们设置为min-width和min-height意味着您的div可以扩展更多以适应内容。缺点是div可以变得比背景图像大，这将导致背景在水平和垂直方向上重复(默认情况下，您可以使用background-repeat来控制它)。
如果你不关心扩展，你可以设置一个固定的width和height为div
没有办法用CSS动态地做到这一点，可以在服务器上测量图像的大小，并在客户端使用javascript生成所需的CSS。
为什么不能作为div中的标签呢?
将 放在div中，它就会起作用