电脑爱好者,提供IT资讯信息及各类编程知识文章介绍,欢迎大家来本站学习电脑知识。 最近更新 | 联系我们 RSS订阅本站最新文章
电脑爱好者
站内搜索: 
当前位置:首页>> css>>css中关于background图片背景cover和contain的对比和使用方法:

css中关于background图片背景cover和contain的对比和使用方法

来源:网络 | 2018-12-28 | (有276人读过)

对于这两个属性,官网是这样解释的:

contain

此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

等比例缩放图象到垂直或者水平其中一项填满区域。

cover

此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

等比例缩放图象到垂直和水平两项均填满区域。

 


读了还是不懂,那么看下面的例子:

contain,按比例调整背景图片,使得其图片宽高比自适应整个元素的背景区域的宽高比,因此假如指定的图片尺寸过大,而背景区域的整体宽高不能恰好包含背景图片的话,那么其背景某些区域可能会有空白。看以下代码。



.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440,而元素相对区域高度为50*/ 
    background-size:contain;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/ 
    background-size:contain;
}

当图片恰好自适应铺满元素的宽度或者高度,那么元素的会有空白处存在,也就是图中红色框框都显示了空白。


3 . cover,按比例调整背景图片,这个属性值跟contain正好相反,背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话,那么背景图片就会被咔嚓。



.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440,而元素相对区域高度为50*/ 
    background-size:cover;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/ 
    background-size:cover;
}

当使用了 cover 这个值的时候,那么正好就跟contain相反,其会正好覆盖整个背景相对区域,但是背景图片的某些部分就看不见。


css热门文章排行
网站赞助商
购买此位置

 

关于我们 | 网站地图 | 文档一览 | 友情链接| 联系我们

Copyright © 2003-2019 电脑爱好者 版权所有 备案号:鲁ICP备09059398号