我正在制作用于android的cordova项目,同时为了提高性能目的,我将所有html文件转换为一个文件,因此我无法在< body>中应用任何类或设置背景图像标签。另外,我需要为< div> 标记设置背景图片
我尝试使用以下代码,但图像没有完全设置为背景,顶部,底部,左侧和右侧有一些空间,背景图像最终会滚动很少。如果图像是拉伸,那不是问题。
从下面的输出中你无法理解我的整个问题,所以请复制整个代码并在你的系统中创建一个新的html文件并检查移动视图。
<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%;
}
</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>
答案 0 :(得分:0)
尝试这种方式。
<div id="mytext" style="background: center cover fixed no-repeat url('https://s4.postimg.org/rfdxbny59/menus-min.jpg');">
<!-- Your content here -->
</div>
希望它能够奏效。
答案 1 :(得分:0)
您正在尝试根据我的理解创建视差效果。
你可以试试这个:
.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%;
}
如果您有多个html并希望保持所有文件相同,则可以将其放在单独的css文件中。