700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > css 背景图铺满整个屏幕无滚动条

css 背景图铺满整个屏幕无滚动条

时间:2024-04-17 04:35:56

相关推荐

css 背景图铺满整个屏幕无滚动条

kk总结了两种方式实现背景图铺满整个屏幕并且无滚动出现的方式,下面来一一介绍:

方法一:

先上个效果图

html页面:一个用来放背景图的容器.bg

<body> <divclass="main"> <divclass="bg"></div> </div><script>

style样式:.bg的样式

<style>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 center0;/*引入背景图,不重复出现*/ background-size:cover;/*图片随屏幕大小同步缩放,但是图片画面可能只显示一部分*/ }</style>

方法二:

效果图:

这个显示简直完美!

style样式如下:

<style>body{margin:0;padding:0;}div.bg{width: 100%;height:100vh;background:url("img/banner01.jpg")no-repeat;background-size:100% 100%; /*随着原始比例缩放*/ }</style>

注:vh:表示 显示窗口的高度,设置了100vh后,div.bg的高度会随着窗口的大小改变儿变化;

今天先到这里啦,各位大神有什么别的更好的方法,欢迎一起讨论哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。