深入理解首页全屏效果，并实现自适应裁剪效果。

在初步实现首页全屏效果之后（链接在页尾推荐），我们可以对其进一步的优化，我们发现，虽然实现了全屏，但是随着浏览器串口的改变，图片也会随之改变从而导致图片一定程度上的变形，这样的体验肯定是不完美的。

//首先优化一下代码，这个背景图肯定是要从后台取的
//假定是从后台取的一篇头条文章素材，全屏图就是素材的封面
    
    //这个空div来控制封面背景大图
    
    
    
    //这个空div 来设置朦胧色
    
    
    //素材文章的结构    
    
        
        
 
            //素材文章的标签，从后台取背景色           
            {{empty($banner['label'])?"":$banner['label']
            //素材文章的标题            
            
{{empty($banner['biaoti'])?"":$banner['biaoti']}}
            //素材文章的摘要            
            
{{empty($banner['zhaiyao'])?"":$banner['zhaiyao']}}
        
        
    
    

//CSS代码：

.backimg{
    height: 100%;    //记得一定要给这个元素的所有父元素设置height:100%
    background-image: url("../images/banner95.jpg");    //这里设置了一个默认的背景图
    background-repeat: no-repeat;    //不让图片平铺
    background-size:cover;    //控制背景图占满屏
    background-position: center center;    //定位为图片的中心点，控制大屏上下左右都裁剪
    color: white
}
//设置阴影效果的div
.back{
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    background-color: #000;
    opacity: 0.65
}

//使用媒体查询，在手机端的时候不让它100%占满
@media (max-width: 767px) {
    .backimg{
        height: 400px;    //设置高度为400px，可以发现当高度设定，图片为了不失真，只会左右裁剪
        background-image: url("../images/banner95.jpg");
        background-repeat: no-repeat;  
        background-size:cover;    
        background-position: center center;
    }
    .back{
        height: 400px;
    }
}

效果图：

Screenshot.png

Screenshot-1.png

Screenshot-2.png

Screenshot-3.png

可以看到，不管是多大的屏幕尺寸，背景图都没有变形，而且做到了类似自动裁剪的功能。