html背景图片手机端全屏,css 背景图全屏显示，兼容移动端

.login {

background: url(img/login.jpg) no-repeat center center;

background-size: cover;

background-attachment: fixed;//当页面的其余部分滚动时，背景图像不会移动。

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

问题一：

![QQ图片20200228120623.png](/img/bVbDTJ4)

因为background-attachment:fixed属性在移动端不兼容，就出现了在手机端显示的时候背景图不展开的情况。

问题二：

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

有定位的时候，在PC端当列表内容超过屏幕高度时，列表无法下拉。

整体来说，上面的写法对PC端、移动端都不是很友好。

所以我搜了一个更好的写法，在背景前添加了一个伪类，即兼容性移动端，也没有列表无法滚动的问题。

.login:before {

content: "";

background: url(img/login.jpg) no-repeat center center;

background-size: cover;

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

html背景图片手机端全屏,css 背景图全屏显示，兼容移动端相关推荐

html背景图片不重叠铺满,css背景图片怎么铺满
该方法适用于所有品牌的电脑. CSS设置拉伸背景图片铺满屏幕新建一个html文件,命名为test.html,用于讲解CSS中如何设置拉伸背景图片铺满屏幕. 在test.html文件内,使用div标签 ...
html背景图片div设置宽自动,CSS背景图片固定宽高比自适应调整的实现方法
标签可以使图片在保持宽高比不变的情况下自动调整.我们讨论的是div的背景图片实现固定宽高比自适应调整的方法.这里的图片不是< img>标签一样通过src引入,而是通过css的backgro ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
希沃白板如何解决手机端播放课件内视频出现黑屏闪退
使用希沃白板的手机端或微信小程序端播放视频时,会受到手机和微信浏览器的限制,能播放的视频格式有限,请在制作课件时转换好视频格式才进行直播等我最近在使用希沃白板的云直播功能,希沃白板的云直播功能十分好 ...
【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景二.完整代码示例一.滑动门技术 1.滑 ...
html内容被背景图片遮住怎么办_定义BODY背景图后，DIV的背景图片显示不全（已解决）...
你的位置: 问答吧 -> WEB标准 -> 问题详情定义BODY背景图后,DIV的背景图片显示不全(已解决) 一个有趣的问题,当BODY有背景图片的时候,BODY里的DIV一旦也有背景图 ...
Java怎么让图片在窗体_在窗口添加背景图片-java怎么设置窗体的背景图片 – 手机爱问...
2018-04-07 背景图片怎么设置? 背景图片代码:更换整体页面背景的源代码:body{b (大背景图片地址) repeatscroll!important;}更换页面题图logo图片的源代码:. ...
手机端页面制作之——背景图片因长度不够而出现堆叠
每日一更文章,看看我能坚持多久,这是第三天了今天的文章主题是解决背景图片因为长度有限不能够充满整个页面,当设置 background-repeat: repeat-y; 或者 background- ...
html图片手机端不清楚,HTML+CSS图片大小自适应~PC电脑端、手机端
写页面的时候经常会遇到需要图片自适应容器大小这样的情况: div{width:400px;height:400px;border:1px solid #000; } img{width:100%; ...

html背景图片手机端全屏,css 背景图全屏显示，兼容移动端

html背景图片手机端全屏,css 背景图全屏显示，兼容移动端相关推荐

最新文章

热门文章