IE8兼容 background-size:cover

当我们要实现背景是图片平铺整个屏幕的页面时,就能想到运用css属性background-size来设置背景图大小,设置属性值是关键字cover, 这就是缩放背景图片以完全覆盖背景区,刚好满足我们的要求。

1
2
3
4
5
6
7
8
9
10
html {
background-image: url(xxx.png);
// 背景图居中
background-position: center;
// 要兼容各种版本浏览器的话,要有私有前缀
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

但是, 这里会遇到兼容性问题,ie8及以下不支持background-size属性,假如ui给的图是1920*1080的背景切图,在ie8下,图片按照原图大小显示,会很突兀,那怎么解决呢?

解决方法

运用IE滤镜,Microsoft.AlphaImageLoader

原理

运用滤镜,在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。

参数说明

Microsoft.AlphaImageLoader 提供了3个参数

  • enabled: 置滤镜是否激活, 默认true
  • src: 设置图片地址为中间显示图,! 该地址是相对显示的html的路径,而不是相对于css文件本身
  • sizingMethod: 设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式
    • image(默认): 增大或减小对象的尺寸边界以适应图片的尺寸)
    • crop: 剪切图片以适应对象尺寸
    • scale: 缩放图片以适应对象的尺寸边界

很明显,我们需要指定image,选用scale的缩放适应的方式兼容。

代码示例

首先,我把背景图改为设置在body上,因为不支持<html>标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body {
heiht: 100%;
width: 100%;
background-image: @bgPC;
background-attachment: fixed;
background-position: center;
// 兼容IE8设置
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./assets/css/img/bg_pc.png', sizingMethod='scale');
-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./assets/css/img/bg_pc.png', sizingMethod='scale');
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

注意

1. 该方法不适合用在`<html>`标签,可以在`body,div..`等,官方文档有列举,可点击参考链接查看
2. 可能造成该容器区域内的链接和按钮无效,可设置链接或按钮`position:relative`使其相对浮动, 如果加载滤镜的区域的父层是`position:absolute`时,可使用浮动办法处理。

官方文档

https://msdn.microsoft.com/en-us/library/ms532920(v=vs.85).aspx

0%