响应式背景图片的几种方法

响应式背景图片

一.利用css3 中的background-size: cover属性

1.background-size: length|percentage|cover|contain;

浏览器支持情况： IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。

值	说明
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
cover	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background-size:cover 背景图片</title><style>*{margin: 0;padding: 0;}body {background: url(bg-img.jpg) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}</style>
</head>
<body></body>
</html>

补充：baacground属性

background-color：设置背景颜色
background-image : url() 设置背景图像
background-repeat : 设置重复方式取值 repeat-x | repeat-y | repeat | no-repeat;
background-attachment : 设置背景图片的固定方式取值 fixed | scroll
background-position : 设置背景的左上角位置,坐标可以是以百分比或固定单位。取值 X轴坐标,Y轴坐标[top,bottom,center,left,right,10px,20%];

background 属性的简写形式：
- - - - - background 各个值的顺序依次：
background-color | background-image | background-repeat | background-attachment | background-position

补充：兼容性写法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div+position</title><style>* {margin: 0;padding: 0;}.bg-img {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: url('bg-img.jpg') no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;z-index: -1;-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-img.jpg', sizingMethod='scale')";filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-img.jpg', sizingMethod='scale');}</style>
</head>
<body><div class="bg-img"></div>
</body>
</html>

二.利用在页面中拆入图片实现背景

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>利用img来实现背景图片</title><style>*{margin: 0;padding: 0;}.bg-res {position: fixed;top: 0;left: 0;min-height: 100%;height: auto;min-width: 1440px;width: 100%;}/*为了屏幕小于1440,图片能居中显示*/@media screen and (max-width: 1440px) {.bg-res {left: 50%;margin-left: -720px;}}</style>
</head>
<body><img src="bg-img.jpg" alt="" class="bg-res">
</body>
</html>

浏览器兼容情况：IE8及以下，在1440px宽度以下，仍然无法使图片的效果居中。

三.利用jquery实现背景图片响应式

-获取浏览器的宽度，计算图片宽/高比例，为背景图片设置百分比

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>利用jquery来实现背景图片响应式</title><style>* {margin: 0;padding: 0;}#bg-res {position: fixed;top: 0;left: 0;}.bg-width {width: 100%;}.bg-height {height: 100%;}</style><script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script><script>$(document).ready(function(){var h = $(window).height();var w = $(window).height();var s = $('#bg-res').width()/$('#bg-res').height();$(window).resize(function(){if(w/h<s){$('#bg-res').removeClass();$('#bg-res').addClass('bg-width');}else{$('#bg-res').removeClass();$('#bg-res').addClass('bg-height');}})})</script>
</head>
<body><img src="bg-img.jpg" alt="" id="bg-res"  >
</body>
</html>