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

来源：互联网发布：网络情歌《恋恋红尘》编辑：程序博客网时间：2024/06/05 06:17

响应式背景图片

一.利用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>

阅读全文

0 0