如何爲div放置固定的背景？

-1

我正在爲android製作cordova項目，也爲了提高性能目的，我將所有的html文件轉換爲一個文件，所以我無法在<機身>標籤中應用任何類或設置背景圖像。另外我需要設置背景圖片爲<div>標籤。
我用下面的代碼嘗試過，但圖像沒有完全設置爲背景，頂部，底部，左側和右側有一些空間，背景圖像將在最後滾動一點。如果圖像是伸展，那不是問題。

從下面的輸出中，您無法理解我的整個問題，因此請複製整個代碼並在您的系統中創建一個新的html文件，然後在移動視圖中檢查。如何爲div放置固定的背景？

<html> 
 
<head> 
 
<title>Test</title> 
 
<style> 
 
.fxdback 
 
{ 
 
    height: 100vh; 
 
    overflow: scroll; 
 
    background: url(https://s4.postimg.org/rfdxbny59/menus-min.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
} \t 
 
</style> 
 
</head> 
 

 
<body> 
 

 
<div class="fxdback"> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
This ist he test<br/> 
 
</div> 
 
</body> 
 
</html>

來源

2017-06-21 Merbin Joe

嘗試這種方式。

<div id="mytext" style="background: center cover fixed no-repeat url('https://s4.postimg.org/rfdxbny59/menus-min.jpg');"> 
 

 
<!-- Your content here --> 
 

 
</div>

希望它應該工作。

來源

2017-06-21 09:18:36

這樣，整個圖像滾動 –

您試圖根據我的理解創建視差效果。

你可以試試這個：

.bgimg-1 {        // this is the most important code 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

//this one for image (Logo. Full height) 
.bgimg-1 { 
    background-image: url('image path'); 
    min-height: 100%; 
}

，你可以把它放在單獨的css文件，如果您有多個HTML並希望將所有的文件相同。

來源

2017-06-21 09:20:05

整個圖像滾動，這並沒有固定背景圖像。 –

@MerbinJoe 好吧，它爲我工作。嘗試此， '

請檢查此鏈接的https ：//jsfiddle.net/2e0zjwus/ –

如何爲div放置固定的背景？

回答

相關問題