html - 指定 block 背景图片而不指定高度和宽度

Question

我的站点标题中有下一个结构:

html

<header>
 <div class='logo'></div>
 <div class='header'></div>
</header>

CSS

header .logo {
 background-image: url('../images/logo.png');
 width: 150px;
 height: 165px;
}

header .header {
 background-image: url('../images/header.png');
 width: 960px;
 height: 57px;
}

如何在不指定高度和宽度的情况下设置div的背景图像？

Answer 1

听起来您想要的是让背景图像适合这些容器，而无需明确设置高度和宽度。我建议使用 background-size: cover、background-position: center 和 background-repeat: no-repeat 来完成此操作。或者，如果您不想覆盖整个 div(可能在 Logo 的情况下)，您可以将宽度设置为百分比，将高度设置为自动(反之亦然)。