对于CSS学习中经常遇见的背景设置属性,感觉这个属性很常见吧,其实它也是 CSS3 中新加的属性。在CSS2中我们知道,背景图片的大小是无法用这个方法设置的。
然而在CSS3的优化中,background-size
除了常见的设置大小和百分比之外,还有两个特殊的属性:contain
和 cover。
-
background-size: contain
这个属性是用来针对图片长宽不相同时,把图片按比例缩小至较长的一方完全适应内容区域为止,多用于背景图片比元素大的情况。
-
background-size: cover
这个属性是用来设置图片长宽不相同时,把图片按比例放大至较短的一方完全适应内容区域为止,以使背景图像完全覆盖背景区域,多用于背景图片比元素小的情况。