html背景图不兼容ie8,关于IE8以下不支持background-size的兼容方案

在指定背景图像适应DIV的宽高时,我们可以使用

background-size:100% 100%

或者

background-size:cover

来让背景铺满这个DIV。

但是在IE8以下(包括IE 8)这个CSS属性并不受支持。那如何解决呢?

IE的AlphaImageLoader滤镜可以解决这个问题,详细可参看

https://msdn.microsoft.com/zh-cn/library/ms532969(v=vs.85).aspx

此处针对其用法做简单说明

HTML用法:

JS用法:

object .[style](https://msdn.microsoft.com/zh-cn/library/ms528442(v=vs.85).aspx).filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)"

其中sProperties可以包含enabled、sizingMethod和src三个属性。

enabled:布尔型,true或false,指明滤镜是否启用

sizingMethod:指明图像适应容器方法,可以使crop(裁剪图像适应容器)、image(容器适应图像本身大小)和scale(缩放图像适应容器)

src:要加载的图像路径,必须是相对于该页面的,所以如果在CSS中指定必须使用绝对路径,不能使用相对于CSS文件的相对路径,可能会出错。

例子:

var bToggle = 1

function fnToggle(oObj) {

if (bToggle) {

bToggle = 0;

oDiv.filters(0).sizingMethod="image";

oObj.innerText='Enlarge It';}

else {

bToggle = 1;

oDiv.filters(0).sizingMethod="scale";

oObj.innerText='Make Normal';}

}

Make Normal

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值