响应式背景图片的几种方式(举例padding-top实现响应式背景图)

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

补充:background属性

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>

我们都知道,在处理相应布局的时候,背景图片都是等比例缩放,使用引入的话,设置width:100%;height:100%;那么图片就会等比例缩放,这是图片,那么如果是背景图呢?我们之前的项目中常见的做法是根据css3媒体查询的方法来做的,根据不同手机的分辨率的不同,来等比例缩放背景图的高度,虽然这种方式是可以解决的,但是这种通过人肉的的方式来进行的设置并不好,也很繁琐,今天我们来学习使用padding-top这么一个属性来设置;

实现的基本原理:将使用到保持元素的宽高比的技巧,为元素加垂直方向padding-top值,使用百分比的形似,这个是相对于元素的宽高而定的,比如,一张图片的宽度为474px,高度为355.5px,那么现在的

padding-top = (高度/宽度)*100%=(474/355.5)*100%=75%

但是仅仅对图片高度和宽度缩放还不够,我们还必须添加background-size:cover,使用这个属性让北京元素铺满,但是IE8及以下不支持该属性,因此为了兼容IE下面的浏览器,我们还需要再加一个属性background-position:center;同时我们也要保证图片的宽度最大等于父容器的宽度;因此下面的HTML代码如下:

使用padding-top实现响应性图片(图片的宽度是474px,高度是宽度的75%)

css代码如下:

  .column{
        max-width: 474px;
 }
 .figure {
         padding-top:75%; 
         background:url("http://img3.duitang.com/uploads/item/201604/13/20160413131244_yxuwU.jpeg") no-repeat;
         background-size:cover;
         background-position:center;
    }

效果如下:
响应式背景图片的几种方式(举例padding-top实现响应式背景图)_第1张图片
响应式背景图片的几种方式(举例padding-top实现响应式背景图)_第2张图片
自认为这种方法简单一些~~

你可能感兴趣的:(CSS)