突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效。思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代。

当CSS背景图片拉伸这个问题产生时,CSS3也只是浮云....

对于IE而言网上常见的方法是使用CSS滤镜,但那时Firefox还小,Chrome还没出生,IE称霸天下....。但如今,我们用三四行简短的代码就能实现全浏览器兼容的方法:

.bg{
background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
background-size:100% 100%;
}

源码调试:http://jsfiddle.net/wyongzhi/r3vM7/

CSS背景图拉伸自适应尺寸,全浏览器兼容的更多相关文章

  1. CSS背景图拉伸自适应尺寸

    .bg{ background:url(images/test.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoade ...

  2. CSS背景图怎么自适应全屏(手机或者电脑)

    #demo{ background-img:url(../bg.png); --(1)适用于上半部分背景图片,下半部分纯色 将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器) backgr ...

  3. CSS背景图拉伸不变形

    在线效果体验:http://hovertree.com/texiao/mobile/3.htm 请使用手机浏览器查看. css代码: .bg{ background:url(http://hovert ...

  4. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  5. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  6. 项目期复习总结1:背景图合并,hack,浏览器内核前缀,伪类after before

    文件夹: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合 ...

  7. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...

  8. Lodop打印控件不打印css背景图怎么办

    background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...

  9. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

随机推荐

  1. 全面理解面向对象的 JavaScript (share)

     以下分享自:  http://www.ibm.com/developerworks/cn/web/1304_zengyz_jsoo/   简介: JavaScript 函数式脚本语言特性以及其看似随 ...

  2. LeetCode【217. Contains Duplicate】

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  3. 如何在IIS 7.5中部署Asp.Net MVC 5的网站

    0 Sign in to vote 系统是 windwos 2008 已经安装.Net 4.0 和 .Net 4.5 已经安装MVC4 的需要文件,MVC5 找不见下载地方,求各位大哥告知一下在哪里可 ...

  4. [Spring MVC] - InitBinder验证

    Spring MVC使用InitBinder验证: 使用InitBinder做验证的情况一般会在此Controller中提交的数据需要有一些是业务性质的,也即比较复杂的验证情况下才会使用.大部份简单的 ...

  5. 【python】类的继承和多态

    比如,我们已经编写了一个名为Animal的class,有一个run()方法可以直接打印: class Animal(object): def run(self): print 'Animal is r ...

  6. javascript性能优化总结一(转载人家)

    一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于 ...

  7. SVD分解的理解[转载]

    http://www.bfcat.com/index.php/2012/03/svd-tutorial/ SVD分解(奇异值分解),本应是本科生就掌握的方法,然而却经常被忽视.实际上,SVD分解不但很 ...

  8. CSS基本语法

    这里主要介绍Bootstrap里用到的CSS语法,以便在源码分析时更容易理解和学习.Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理. 优先级 如何确定CSS的优先级,这里 ...

  9. 树莓派 自身摄像头的opencv调用

    之前写过一篇随笔关于树莓派3上摄像头的调用,使用的方式是安装v4l2驱动. 实际上有一种更加简单的方法. 树莓派中的camera module是放在/boot/目录下以固件的形式加载的,不是一个标准的 ...

  10. mysql数据库连接方式(.net)

    1.通过ado.net连接(数据库连接串中库名称为中文无法使用) 需要添加MySql.Data.dll(可通过安装mysql-connector-net-6.8.3.mis获得) 引用MySql.Da ...