首页 > 代码库 > css实现响应式全屏背景
css实现响应式全屏背景
利用css中 background-size：cover 填充整个viewport
注意：
一张背景图像素5000px*5000px在pc端 缩放都基本满足要求 不会出现模糊失真；
但是在移动端使用如此大的图片完全是浪费资源，大图会导致加载变慢，尤其是在移动网络下。
在移动端可以另设一张相对小一点的图片使用媒体查询
body{/* 加载背景图 */background-image: url(images/background-photo.jpg);/* 背景图垂直、水平均居中 */background-position: center center;/* 背景图不平铺 */background-repeat: no-repeat;/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */background-attachment: fixed;/* 让背景图基于容器大小伸缩 */background-size: cover;/* 设置背景颜色，背景图加载过程中会显示背景色 */background-color: #464646;}
@media only screen and (max-width: 767px) { body { background-image: url(images/background-photo-mobile-devices.jpg); }}
css实现响应式全屏背景
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。