html - 背景在移动设备上显示不正确
问题描述
所以我最近把我的改成background-size
100% 100%,封面;
但它在手机上看起来并不好。基本上宽度是正确的,但高度只是搞砸了,向下滚动后拆分整个屏幕。我觉得我错过了什么。
示例:https ://imgur.com/a/y56b6Pb0
width: 100%;
height: 100%;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
background-color: black;
margin: 0;
padding: 0;
background-color: #242424;
background-image: url(/assets/img/bg1.jpg);
background-size: 100% 100%, cover, cover !important;
background-repeat: no-repeat;
background-attachment: fixed;
overflow-x: hidden;
html
<body id="page-top" style="background-size: cover; background-repeat: no-repeat;">
<div id="page-loader" class="showme">
<div>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
</div>
</div>
<div id="cookies-information" class="alert alert-info alert-dismissable">
<a href="#" id="cookie-info-close" class="close" data-dismiss="alert" aria-label="close">×</a>
<p>This site uses cookies — small text files that are placed on your machine to help the site provide a better user
experience. <a href="https://www.whatarecookies.com" target="_blank">Read more</a></p>
</div>
<div id="image-modal">
<img src="https://placehold.it/600x400">
<button class="btn btn-default">Close</button>
</div>
<div id="main-menu">
<div class="menu-logo">
<a href="/">
<img src="assets/img/logo.png" style="width:90px;height:auto;">
</a>
</div>
解决方案
由于我没有您的原始背景图片,因此我使用在线图片。希望这是您想要实现的目标。
html {
height: 100%;
}
body {
/* The image used */
background-image: url("https://www.w3schools.com/howto/img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<body>
<div id="page-loader" class="showme">
<div>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
</div>
</div>
<div id="cookies-information" class="alert alert-info alert-dismissable">
<a href="#" id="cookie-info-close" class="close" data-dismiss="alert" aria-label="close">×</a>
<p>This site uses cookies — small text files that are placed on your machine to help the site provide a better user experience. <a href="https://www.whatarecookies.com" target="_blank">Read more</a></p>
</div>
<div id="image-modal">
<img src="https://placehold.it/600x400">
<button class="btn btn-default">Close</button>
</div>
<div id="main-menu">
<div class="menu-logo">
<a href="/">
<img src="assets/img/logo.png" style="width:90px;height:auto;">
</a>
</div>
推荐阅读
- maintenance-mode - 目标组中没有健康实例时的维护页面
- arrays - 为什么变量的值在程序中改变而不改变?
- php - 我想将记录从 SQL 导入 Excel
- mysql - 选择具有回退空记录的行
- javascript - 有没有办法让我的 JavaScript 文件不在 html 页面中运行?
- bash - 使用转义字符在 shell 中组合命令?
- odoo - 如何在 Odoo 组(角色)选择中使用选择字段(下拉菜单)而不是复选框?
- nsdate - NSDateFormatter 为指定的日期字符串返回 nil 日期
- amazon-web-services - 具有空事件的映射步骤 lambda 函数正在运行 keyerror
- flutter - URL_LAUNCHER 在发布模式下不起作用