码迷,mamicode.com
首页 > 其他好文 > 详细

background-size

时间:2017-01-13 13:58:35      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:contain   继承   情况   back   png   pre   超出   over   自适应   

background-size:contain;

  contain:包含

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

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

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

  技术分享技术分享

 

  

background-size:cover;

  cover:覆盖

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

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

  技术分享技术分享

background-size:100% 100%;

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

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

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

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

  技术分享技术分享

background-size:inherit;

  inherit:继承

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

  技术分享技术分享

background-size

标签:contain   继承   情况   back   png   pre   超出   over   自适应   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!