指定块背景图像而不指定高度和宽度

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（可能是徽标），您可以将宽度设置为百分比，将高度设置为自动（反之亦然）。

Answer 2

如果您不想在div中使用内容并且不想在css中设置高度和宽度，但是希望在rthe CSS中设置图像而不是直接在html中设置图像< / em> - 你可以玩：

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

CSS /内容：＆＃34;＆＃34;

header .logo:after {
 content: url('../images/logo.png');
}

header .header:after {
 content: url('../images/header.png');
}

http://caniuse.com/#feat=css-gencontent

---

Answer 3

如果您希望div具有未明确设置的尺寸，则需要向其添加内容，例如某些文字。

如果您不希望div包含任何内容，那么为什么要使用div代码？也许img标签会更好？