HTML，CSS：如何在沒有任何內容的情況下在整個div中顯示圖像

嘿，我正在建設一個網站！我試圖讓background-image適合整個div.section。我試過height: 100%; width: 100%;，但沒有奏效。我需要一些幫助。HTML，CSS：如何在沒有任何內容的情況下在整個div中顯示圖像

這需要有背景圖像的代碼的一部分：

.section { 
    background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover; 
    height: 100%; 
    width: 100%; 
}

我上的jsfiddle完整代碼：https://jsfiddle.net/2Lqxqw10/（請務必使結果最大的寬度）或其他鏈接：https://mahalakshmi-consultants-shreyas1703.c9users.io/index.html

謝謝你提前！

來源

2016-04-13 Shreyas Sreenivas

'背景尺寸：100％100％;' –

你'.section'元件不具有高度，從而圖像與0像素高度顯示。 –

使用像素而不是百分比 –

你可以用適當的絕對位置z-index，它也可以工作：

.section { 
    background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    z-index: -1; 
}

See it here

來源

2016-04-13 12:38:48

寬度和高度設置您div的比例。設置背景的大小，你需要的CSS屬性background-size：

.section { 
    background-position: 0 0; // start from top left 
    background-size: 100% 100%; // expand to 100% in both directions 
}

來源

2016-04-13 12:36:12 KWeiss

你需要一定的高度設置爲您的部分如：

.section { 
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat  center/cover; 
height: 500px; 
width: 100%;

}

fiddle

來源

2016-04-13 12:36:48 Kypaz

目前.section僞null或者它沒有數據放入一些數據，或給一些特定的高度.section僞查看部分

來源

2016-04-13 12:39:04

添加絕對位置.section僞類。

.section { 
    background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover; 
    height: 100%; 
    width: 100%; 
    position absolute; 
}

https://jsfiddle.net/2Lqxqw10/6/

來源

2016-04-13 12:39:47

HTML，CSS：如何在沒有任何內容的情況下在整個div中顯示圖像

回答

相關問題