CSS设置背景图片自适应屏幕

直接设置CSS样式

1
2
3
4
5
6
7
.bg {
background-image: url(../images/1.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}

在以上代码中,background-size: cover; 是对背景图进行等比例拉伸,仍然存在图片显示不完全的问题。background-size: 100% 100%; 是对背景图的宽拉伸至屏幕宽度,高拉伸为屏幕高度,即非等比例拉伸。

该方法虽然较为简单,但存在问题:对图片进行拉伸比例偏差较大时会使图片失真。

利用 CSS @media

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media only screen and (min-width: 1024px) { //当分辨率width >= 1024px 时使用1.jpg作为背景图片
.bg {
background:url(../images/1.jpg) no-repeat;
}
}
@media only screen and (min-width: 400px) and (max-width: 1024px) { //当分辨率400px < width < 1024px 时使用2.jpg作为背景图片
.bg {
background:url(../images/2.jpg) no-repeat;
}
}
@media only screen and (mmax-width: 400px) { //当分辨率width =< 400px 时使用3.jpg作为背景图片
.bg {
background:url(../images/3.jpg) no-repeat;
}
}

通过获取当前屏幕的分辨率,选择不同分辨率对应的样式。

可以简单理解为:提前做好几张不同尺寸的背景图片,在一定分辨率范围内使用某一尺寸的图片。

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :