首页 > 其他 > 详细

background-size

时间:2017-01-13 13:55:53      阅读:263      评论:0      收藏:0      [点我收藏+]
background-size:contain;

  contain:包含

  按比例调整图片,使得图片的宽度自适应容器的宽度。

  相当于在ps中,约束比例设置原始图片的宽度值等于容器的宽度值。

  如果图片过大,等比压缩后容器的高度方向上可能会有空白。

  技术分享技术分享

 

  

background-size:cover;

  cover:覆盖

  相当于ps中,约束比例设置原始图片的高度等于容器的高度。

  得到的图片的宽度可能会大于容器的宽度,页面显示的时候会隐藏超出宽度部分。

  技术分享技术分享

background-size:100% 100%;

  参数一:宽度值 百分比/固定值

  参数二:高度值 百分比/固定值

  相当于ps中,不约束比例设置原始图片高度等于容器高度,宽度等于容器宽度后得到的图片

  可能出现的情况:图片压缩严重

  技术分享技术分享

background-size:inherit;

  inherit:继承

  不对原始图片进行任何处理,多余的进行隐藏。

  技术分享技术分享

background-size

原文:http://www.cnblogs.com/wxiaona/p/6282399.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!