解决IE8不支持transform、background-size属性

1、transformhtml

转换工具:http://www.useragentman.com/IETransformsTranslator/web

总结来源:http://blog.sina.com.cn/s/blog_42cdca7d010142m6.html工具

1)旋转90/180/270度url

1 .rot90 {
2 -moz-transform:rotate(90deg); 
3 -webkit-transform:rotate(90deg);
4  transform:rotate(90deg); 
5 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
6 }

最后一句的"rotation=1"是关键,参数能够是0、一、二、3,除了这几个数字之外,写其余数字图片都不会发生旋转。spa

旋转的角度只要将数值乘以90(π/2),表示顺时针旋转90度,与transform:rotate(90deg);是一个意思。code

2)旋转任意角度orm

旋转任意角度,只需记住下面这串代码:htm

 1 filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand'); blog

示例:图片

1 #rot135
2 {
3 -moz-transform:rotate(135deg); 
4 -webkit-transform:rotate(135deg); 
5 transform:rotate(135deg);
6 filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,
7 SizingMethod='auto expand');
8 }
9 ```

若是只想旋转135度,直接就是(cos(135) = -0.707)

 1 filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand'); 

若是不只想旋转135度并且还想放大两倍,那么M11/M12/M21/M22都乘以2:

 1 filter:progid:DXImageTransform.Microsoft.Matrix(M11=-1.414,M12=-1.414,M21=0.1.414,M22=-1.414,SizingMethod='auto expand'); 

translate利用margin来实现

2、background-size

经过滤镜来实现效果:

1 div {
2 background-image: url('https://www.cnblogs.com/images/logo_small.gif');
3 background-size: cover;
4 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://www.cnblogs.com/images/logo_small.gif',sizingMethod='scale');
5 }

注意两处的路径必须相同,而且是绝对路径!

相关文章
相关标签/搜索