响应式背景图片
一.利用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>