background-size:cover;有什么区别?和背景大小:100%;?

时间:2014-07-09 13:27:15

标签: css background-size

当我将div的图像中的background-size属性设置为background-size: cover;background-size: 100%;时,两者看起来都是一样的。

有什么区别? 什么时候我应该使用封面和100%?

3 个答案:

答案 0 :(得分:17)

cover =将背景图像缩放到尽可能大,以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

基本上它会放大,直到最内侧的边缘接触到侧面,这意味着一些图像可能会被切除,而不像100%所有图像都可见。

例如,请参阅http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

答案 1 :(得分:10)

这是一个小提琴:http://jsfiddle.net/RS5kX/19/

background-size:100%; = background-size:100% auto; =宽度设置为100%,背景图像的高度遵循图像宽高比。

background-size:cover;表示背景图片始终适合整个div,您的div中不会留下任何空白点

background-size:100% 100%

也不会留下任何空白区域,但当然这会破坏原始图像宽高比

答案 2 :(得分:3)

非常确定背景大小:封面;表示图像将填充元素,同时保持其纵横比,而背景大小:100%;只会使图像填充元素的100%宽度。

相关问题