【程序猿分享】Cover的美。– background-size:cover

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_22903531/article/details/78764104

当前流向的前端华丽、简洁、气派、无与伦比的美

分享一个自己最近使用到的– background-size:cover

图片以背景的形式铺满整个屏幕，不留空白区域
保持图片不变形
不出现滚动条
多浏览器支持

支持的浏览器有

1. Safari 3+
2. Chrome
3. IE 9+
4. Opera 10+ (Opera 9.5 支持background-size属性 但是不支持cover)
5. Firefox 3.6+

下面我们先看代码：
css

backgroud {
  background: url(img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

在这里我们会发现IE8不会支持的，现在我真的想放弃IE的兼容性，但是为了严谨必须得好好地去写，我们需要引进如下代码：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";

然后我们在稍微修饰一下这个图片就可以

.bg-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

现在引入html页面代码

<section id="home-bg"
         class="section pos-relative section-statistic bg-parallax p-t-40 p-b-40"
         style="background: url(img/bg-home.jpg) center center no-repeat;">
    <div class="bg-overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12"> 
                <div class="col-md-6 center-block animated bounceIn" id="dowebok" style="float: none">
                    <img src="img/phone.png" class="img-responsive">
                </div>
            </div>
        </div>
        </div>
    </div>
</section>

在此我们无需js只要css3.0就可以完美的做出好好看的北京图，真的太奇妙了。