归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和center定位背景图,然后用background-size来使图片铺满,具体css如下 html { background: url('../../../resources/images/welcome.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size:...
cover 的核心则是要铺满容器，为了铺满容器，那么会选择能够包裹容器的（缩放、拉伸）比率，如上的示例，...
(2)background-size:背景图片的大小 参数:百分比 || 精确值 || auto(默认) || cover || contain auto:背景图像的真实大小。 cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。 图片边缘距父元素边框中最远边等比例放大 contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等。 背景图像...
cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉; contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域; 其实,从英文的意思来说:cover意味着“遮罩、遮盖”---此处理解为“塞满”较恰当,contain意为“包含”--也就是:我图片虽然缩放了,但是整个图是被“包...
background-size: 100% auto:等比缩放, 沿 X轴铺满, 但高不会填充整个区域;可能会留有空白; backgroundSize cover :等比缩放, 显示不完整,超出部分会被裁剪; backgroundSize contain:等比缩放, 但不会填充整个区域;可能会留有空白; 背景图片未设置
background-size中的cover与contain都是将图片以相同的宽高比缩放以适应容易的宽高, 不同的是cover会缩放至图片能够铺满整个容易,可能会有部分图片区域被裁剪, 而contain则是图片会缩放至整个图片都能显示完全,但是容易可能会有留白。 ps:这个就是设置大小的 不是位置...
(1)background-size:100% 100%;---按容器比例撑满,图片变形; (2)background-size:cover;---把背景图片放大到适合元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会裁掉。 当为百分比的时候,100%和100%,100%也会显示不一样的效果:
background-size的可能值 background-size的可能值为auto、contain和cover。 background-size: auto 使用auto,图像将保持其默认大小: 请记住,默认尺寸有时可能会导致图像模糊(如果太小) background-size: cover 在这里,图像将被调整大小以适合容器。如果纵横比不同,则图像将被遮盖以适应。
这要看到你完整的css代码才知道问题所在，因为background-size:cover;在Chrome也是完全支持的，可能是其他代码造成的错误。或者也可以按下面这样来做：background: url(图片url) no-repeat center / cover
background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll; /*元素相对区域宽度为50*/ background-size:contain;} 当图⽚恰好⾃适应铺满元素的宽度或者⾼度，那么元素的会有空⽩处存在，也就是图中红⾊框框都显⽰了空⽩。3 . cover，按⽐例调整背景图⽚，...