background-size 详解

backgroun-size:cover;

.是按照等比缩放铺满整个区域。主要用于图片比div小的时候,将图片按照某一边的比例扩大以填充整个div背景。
.优点:图片不会被拉升,且实用于div长度和宽度的比例合适时候
.缺点:图片会失真,且当宽度和高度比例过大时候,会出现图片显示不全。

backgroun-size:contain:

.也是等比缩放,按照某一边来覆盖显示区域的,会有白边。
.优点:图片不会拉升,且适用于图片比div大时候。
.缺点:有白边

background-size:100% 100%;

.长宽100%显示,可能会拉升图片。
.优点:能使得图片完全在div中显示出来。
.缺点:可能造成图片拉升和失真。

posted on 2019-06-18 11:59  长安城下翩翩少年  阅读(1661)  评论(0编辑  收藏  举报