首页 > 代码库 > background-size

background-size

background-size:contain;

  contain:包含

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

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

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

  技术分享技术分享

 

  

background-size:cover;

  cover:覆盖

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

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

  技术分享技术分享

background-size:100% 100%;

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

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

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

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

  技术分享技术分享

background-size:inherit;

  inherit:继承

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

  技术分享技术分享

background-size