在ie9及以上我们使用
-moz-background-size:70%;
-webkit-background-size:70%;
-o-background-size:70%;
-ms-background-size:70%;
background-size:70%;
图片展示是正确的,能随着窗口的变化而改变大小,
如果我们采用的是在html中引用类似于
<div>
<img src="xxxx/xx.jpg"/>
</div>
那么图片的显示正常的,但是如果我们未来加快页面的加载速度,而尽量避免了 <img src="xxxx/xx.jpg"/>那么,在ie8的环境下图片在不会再识别我们设置的Background-size标签。
方法一使用PIE.htc文件,http://css3pie.com/,该注意的都注意了,但是使用pie.htc文件真的没有效果。
然后用了方法二:使用background-size polyfill的backgroundsize.min.htc文件,直接再ie8的css文件下给属性值添加上
behavior: url(../../css/backgroundsize.min.htc)一般只需在pc端给属性加。
存在局限性
支持
- 背景图像的正确位置和大小
- 浏览器缩放时及时更新
- 更新图片(替换等)时及时更新
不支持
- 多个背景(多重背景)
- 4 个值的 background-position
- 背景重复
- 非默认值的 background-[clip/origin/attachment/scroll]