css 背景图铺满整个屏幕无滚动条 |
您所在的位置：网站首页 › 浏览器占满整个屏幕 › css 背景图铺满整个屏幕无滚动条 |
css 背景图铺满整个屏幕无滚动条
|
kk总结了两种方式实现背景图铺满整个屏幕并且无滚动出现的方式，下面来一一介绍： 方法一： 先上个效果图 html页面：一个用来放背景图的容器.bg style样式：.bg的样式 body{ margin:0; padding:0; } div.bg{ /*方法一*/ position:fixed; top:0; left:0; /*以上三句是让整个span放在屏幕的最左上方*/ width:100%; height:100%; /*以上两句实现全屏大小*/ background:url('img/banner01.jpg') no-repeat center 0;/*引入背景图，不重复出现*/ background-size:cover;/*图片随屏幕大小同步缩放,但是图片画面可能只显示一部分*/ }方法二： 效果图： 这个显示简直完美！ style样式如下： body{ margin:0; padding:0; } div.bg{ width: 100%; height:100vh; background:url("img/banner01.jpg") no-repeat ; background-size:100% 100%; /*随着原始比例缩放*/ } 注：vh:表示 显示窗口的高度，设置了100vh后，div.bg的高度会随着窗口的大小改变儿变化；今天先到这里啦，各位大神有什么别的更好的方法，欢迎一起讨论哦！ |
【本文地址】
今日新闻 |
推荐新闻 |