IE浏览器部分版本不支持background-size属性问题

快来打我* 2022-07-16 01:48 290阅读 0赞

background-size是CSS3新增的属性，但是IE8以下还是不支持，可以通过滤镜来实现这样的一个效果

background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；  
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；  
background-size ：100px 100px; // 调整图片到指定大小；

background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。

浏览器兼容：

IE 和遨游不支持；

Firefox 添加私有属性 -moz-background-size 支持；

Safari 和 Chrome 添加私有属性 -webkit-background-size 支持；

Opera 不支持 background-size 属性，添加其私有属性 -o-background-size 也不支持。

示例：

**\[html\]**  [view plain][]   [copy][view plain]

1.  background:\#00ff00 url(img.jpg) no-repeat;    
2.  \-moz-background-size:60% 80%;     
3.  \-webkit-background-size:60% 80%;      
4.  \-o-background-size:60% 80%;\}  
5.  background-size:60% 80%;

在IE不支持这个属性的时候可以通过滤镜来实现这样的一个效果。

**\[html\]**  [view plain][]   [copy][view plain]

1.  background-image: url('file:///F:/test/images/flashbg.jpg');  
2.  background-size:  
3.  cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg',sizingMethod='scale');

注意：路径须要一样，并且是绝对路径

另外注意图片的大小，有时候用了滤镜感觉还是有问题  background-size:cover

有空再一次整理一下吧

[view plain]: http://blog.csdn.net/auphiria/article/details/45221317#

发表评论取消回复

表情：

评论列表（有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读

相关低版本IE浏览器不支持前端代码修改属性remove()的解决办法

今天在工作中碰到了低版本IE浏览器不支持对象属性移除(remove)和添加(add)的方法，请教了同事结合在网上找到的资源最后写了这一段代码，完美的解决了一个前端基础问题，在此

怼烎@/ 2022年12月28日 14:14/ 0 赞/ 156 阅读

相关让IE支持placeholder属性

placeholder 属性提供可描述输入字段预期值的提示信息该提示会在输入字段为空时显示，并会在字段获得焦点时消失。但placeholder不支持IE10以下版本

Love The Way You Lie/ 2022年08月19日 02:15/ 0 赞/ 289 阅读

相关 IE浏览器版本测试方法

js代码如下： <script> var agent=navigator.userAgent; if(agent.indexOf("Trident/4

末蓝、/ 2022年08月02日 11:44/ 0 赞/ 139 阅读

相关 IE浏览器部分版本不支持background-size属性问题

background-size是CSS3新增的属性，但是IE8以下还是不支持，可以通过滤镜来实现这样的一个效果 background-size：contain; //

快来打我*/ 2022年07月16日 01:48/ 0 赞/ 291 阅读

相关 IE浏览器不支持console，报错未定义问题

IE浏览器不支持console，报错未定义问题 js 中输入 console.log(123123);时报错： ![20180115140936945][]

我不是女神ヾ/ 2022年06月01日 00:10/ 0 赞/ 376 阅读

相关 ie6浏览器不支持float:left 解决办法

ie6似乎不支持float:left 解决方法 IE6里面不兼容,DIV没有打横排列,而显示成竖着排两条语句让你的div变好 1、浮动的div 设置displa

布满荆棘的人生/ 2022年05月21日 11:41/ 0 赞/ 390 阅读

相关 IE不兼容placeholder属性问题

placeholder属性不支持IE10以下的浏览器并且在IE浏览器下样式并没有谷歌等显示的一样正常显示 ![70][] IE10以上显示 ![70 1][] IE

￡神魔★判官ぃ/ 2022年05月09日 14:36/ 0 赞/ 305 阅读

相关 IE 浏览器旧版本下载

![1164733-20190410130129350-1880182345.png][] 1. [http://www.oldversion.com/windows

ゝ一纸荒年。/ 2022年01月06日 10:45/ 0 赞/ 415 阅读

相关 js中 IE 浏览器不兼容 Array.from 显示对象不支持该属性或方法

解决方法：只需加上如下代码即可 if(!Array.from)\{ Array.from = function (el) \{

青旅半醒/ 2021年10月08日 07:46/ 0 赞/ 570 阅读

相关让IE6/IE7/IE8浏览器支持CSS3属性

一、下载搜索下载：ie-css3.htc,它是让IE浏览器支持CSS3表现的关键。二、上面的是什么东西首先说说.htc文件，.htc文件是个脚本文件，个人以

不念不忘少年蓝@/ 2021年09月10日 17:46/ 0 赞/ 504 阅读