如何在沒有內容的情況下顯示背景圖片？

我有一個div與background-image集。我將動態添加內容到這個div，所以我需要它打開background-image。對於背景圖像展現出來，我做到：如何在沒有內容的情況下顯示背景圖片？

background-size:100% 100%;

此外，

height: 100%; 
width: 100%;

但它不顯示圖像。我如何得到這個工作？

jsFiddle

來源

2014-01-23 Rahul Desai

http://jsfiddle.net/LGUFN/4/我剛剛更新小提琴檢查一次 – 3bu1

我想要的高度和寬度是在原有的百分比。 –

你想獲得圖像的原始大小嗎？而不是讓圖像進入背景，你可以使用這將爲您的目的。 – 3bu1

html, body { 
    height: 100%; 
} 

#container{ 
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/d2/IPhone_4S_No_shadow.png'); 
    background-repeat:no-repeat; 
    background-size:100% 100%; 
    border: 1px solid #92b901; 
    display: block; 
    min-height: 100%; 
    min-width: 100%; 
}

來源

2014-01-23 08:49:12 LorDex

謝謝你的回答。如何將圖像尺寸設置爲原尺寸的100％？ –

只是刪除背景大小：100％100％; – LorDex

您需要高度添加到其父母：body和html。只有這樣它才能工作。

像這樣：

html, 
body { 
    height: 100%; 
}

在線例子可以看這裏：http://jsfiddle.net/LGUFN/1/

來源

2014-01-23 08:49:07 skip405

您的div是否有一個大小？如果不是這樣，它會使背景變成div的大小，然後寬度和高度將爲0像素。嘗試添加：因爲#container沒有任何height不顯示

#yourdiv 
{ 
    height: 100px; 
    width: 100px; 
}

來源

2014-01-23 08:49:29 user1433479

圖像。

地址：

html,body{ 
    height:100%; 
}

這會給height到#container。

Demo

來源

2014-01-23 08:49:32 Hiral

我猜div的父母有沒有大小 - 所以100％，將無法正常工作。嘗試是這樣的：

<div class="wrapper" style="height: 100px; width: 100px;"> 
    <div class="bgimage" style="height: 100%; width: 100%;"> 
    your content 
    </div> 
</div>

來源

2014-01-23 08:49:57

body{ 
height:1000px; 
} 

div{ 
background:url('yourpic.jpg');  
width:100%; 
height:100%; 
}

來源

2014-01-23 08:52:44

如何在沒有內容的情況下顯示背景圖片？

回答

相關問題