指定塊的背景圖像，而無需指定高度和寬度

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

*這是很多不喜歡和喜歡的:) –

指定塊的背景圖像，而無需指定高度和寬度

回答

相關問題