突然有人问我这个问题,说网上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. IOS 不兼容 伪类active

    添加空的 事件ontouchstart 例 <body ontouchstart>

  2. 【转载】ansys中压力随时间变化的表格加载方法

    原文地址:http://wenku.baidu.com/link?url=w9k94Upqbok0SUNU3L7LOLRDLUtP7W_KyQWK68ajK_nEbO00mO6hzbuBQ01rS07 ...

  3. Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)

    一.foreach binding 使用此功能可以方便我们循环遍历输出某个数组.集合中的内容. (1).循环遍历输出数组 View Row Code 1 <script type="t ...

  4. 报错:HTTP Status 404 - There is no Action mapped for namespace [/] and action name [product-save] associated with context path [/20161101-struts2-2].

    运行:index.jsp---->input.jsp----->details.jsp,但是在input.jsp到details.jsp的时候报错误. 异常如下: 严重: Could no ...

  5. 【转载】芯片级拆解51、AVR、MSP430、凌阳61、PIC,5种单片机,多张显微照片

    先秀一张解剖照,放大裁剪,小米1S微距拍摄,800万像素摄像头很给力!今天等待被拆的是5个单片机芯片:(1)凌阳16位单片机SPCE061A ,这是我接触的第一个单片机,最高主频49MHz,32KB的 ...

  6. 51nod 1290 Counting Diff Pairs 莫队 + bit

    一个长度为N的正整数数组A,给出一个数K以及Q个查询,每个查询包含2个数l和r,对于每个查询输出从A[i]到A[j]中,有多少对数,abs(A[i] - A[j]) <= K(abs表示绝对值) ...

  7. AsynTask用法

    http://blog.csdn.net/liuhe688/article/details/6532519 在Android中实现异步任务机制有两种方式,Handler和AsyncTask. Hand ...

  8. Android广播机制简介

    为什么说Android中的广播机制更加灵活呢?这是因为Android中的每个应用程序都可以对自己感兴趣的广播进行注册,这样该程序就只会接收到自己所关心的广播内容,这些广播可能是来自于系统的,也可能是来 ...

  9. bootstrap-图文混排 media

    <!-- media 图文混排 media-left(right) 图片的区域 在左边显示(右边) media-body 内容区域 media-heading 内容区域里的标题 media-mi ...

  10. C#微信json结构接收参数 转载

    http://blog.csdn.net/u010773333/article/details/48524155 发素材的时间要上传资源故此要用json格式数据,需要转化. 微信服务器交互基本上都是j ...