前端—背景照片铺满,不产滚动条
方法一:
html{height:100%;}
body{background:url(…/images/bg.jpg) no-repeat scroll 50% 0 transparent;background-size:100% 100%;}
切记:
(1)html的100%要加上,不然图片不会出现。
(2)Body的background-size要加上,不然图片不会全屏,底部会有空白条.
方法二:
.ent{width:100%;height:100vh;background:url(…/images/bg.jpg) no-repeat scroll 50% 0 transparent;background-size:100% 100%;overflow: hidden;}
备注:
(1)此方法是直接在div上应用样式,其中高度为100vh,这个单位老版浏览器不太支持,但新版浏览器没问题。
(2)vh:表示显示窗口的高度,具体的请百度,这个单位会自适应变化;
(3)overflow: hidden;是禁止出现滚动条的。
方法三:
是直接把背景图fixed,width:100%,height:100%。
可以根据具体情况采用。
.ent{position:fixed;left:0;top:0;width:100%;height:100%;background:url(…/images/bg.jpg) no-repeat scroll 50% 0 transparent;background-size:100% 100%;}
————————————————
版权声明:本文为CSDN博主「烈日下的冰」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/xysypch/article/details/84761971

浙公网安备 33010602011771号