指定块的背景图像，而无需指定高度和宽度

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的背景图像没有指定高度和宽度？

来源

2014-04-03 Sharikov Vladislav

将一些内容添加到div的;） – mdesdev

如果您在div中没有任何内容，那么它们将显示为零大小，这意味着您将看不到任何背景，因为您无法显示在一个'0'大小的区域中。因此不得不指定高度/宽度，所以浏览器知道他们应该有一定的尺寸。 –

但我不需要任何内容。我只想要图像这里全是 –

-1

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

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

来源

2014-04-03 18:44:50 alexsanford1

你并不总是需要div内的内容来给它一个大小。你可以简单地使用CSS设置高度！ –

是的，但是我在假设原始海报不想这样做，因为他在他的问题中指出了这一点。编辑我的回应。 – alexsanford1

听起来像你想要的背景图像，以适应这些容器没有明确设置高度和宽度。我会建议使用background-size: cover,background-position: center和background-repeat: no-repeat来完成此操作。或者，如果您不想覆盖整个div（可能是徽标），则可以将宽度设置为百分比，将高度设置为自动（或反之亦然）。

来源

2014-04-03 18:49:15

如果你不想在div的内容和不喜欢设定在CSS的高度和宽度，但希望在HTML设置在rthe CSS的形象，而不是直接 - 你可以有

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

CSS /内容：一玩 “”

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

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

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

来源

2014-04-03 18:57:11

*这是很多不喜欢和喜欢的:) –

指定块的背景图像，而无需指定高度和宽度

回答

相关问题