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

响应式背景图片

一.利用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>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页