background-size的值种类:1个或2个值,这些值既能够是像素px,还可以是百分比%或auto,还能够是特殊值cover, contain。
background-size能够设定2个值,1个为必填,1个为可选。
在其中第1个值用于特定情况图的width,第2个值用于特定情况图的height,假如只给background-size设定1个值,则第2个值默认设置为auto高宽比全自动 (一般默认设置高宽比是auto全自动,自可用內容而增高,一般假如想高宽比自融入无需设定) (cover和contain特殊值以外)。
div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:100px;
}
等额的于:
div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:100px auto;
}
查询实际DEMO: background-size的值界定。当你应用firebug抓取到那个案例连接点时,你会发现第2个值被全自动再加了而且值为auto。自然,你还可以手动式将第2个值设定为auto,随后与该DEMO的案例比照,它们的实际效果将是同样的。
background-size的特殊值:
cover: 维持图象自身的宽高占比,将照片放缩到恰好彻底遮盖界定情况的地区;
contain: 维持图象自身的宽高占比,将照片放缩到宽度或高宽比恰好融入界定情况的地区;
cover值:
div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:cover;
}
上例,情况照片将遮盖全部div地区。查询实际DEMO: background-size:cover。
contain值:
div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:contain;
}
上例,情况图将放缩到宽度或高宽比的随意1边与div地区融入。查询实际DEMO: background-size:contain。