css 背景图铺满整个屏幕无滚动条 |
您所在的位置:网站首页 › vue中背景图显示不全 › 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的高度会随着窗口的大小改变儿变化;今天先到这里啦,各位大神有什么别的更好的方法,欢迎一起讨论哦! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |