css实现响应式全屏背景

原创
2020/05/07 14:38
阅读数 48

利用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);
  }
}

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部