自己比较头疼的问题,网上搜了好多资料,大概整理了一下
1. 直接设置CSS样式达到目的
.bg{
background-image: url(../images/1.jpg);//此为图片地址
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}
在以上代码中,background-size: cover;是对背景图进行等比例拉伸,仍然存在图片显示不完全的问题。
background-size: 100% 100%;是对背景图的宽拉伸至屏幕宽度,高拉伸为屏幕高度,即非等比例拉伸。
该方法虽然较为简单,但存在问题:对图片进行拉伸成都较大时会使图片失真。
2. 利用 css @media
通过获取当前屏幕的分辨率,选择不同分辨率对应的样式。
可以简单理解为:提前做好几张不同尺寸的背景图片,在一定分辨率范围内使用某一尺寸的图片。