突然有人问我这个问题,说网上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. MySQL安装及主从配置

    系统环境:CentOS release 6.5 (Final)(最小化安装) MySQL版本:mysql-5.6.12 Cmake版本:cmake-2.8.4 说明:安装mysql先安装cmake(原 ...

  2. Asm.Def点大兵

    syzoj上的题,收货很多,orz天天学长 原题: Asm.Def奉命组建一支m人的特种作战小队前往圣迭戈.他有n名候选人,可以在其中任意挑选.由于小队中每个人都有独特的作用,所以次序不同的两种选法被 ...

  3. ps磨皮

    光滑磨皮步骤: 1.用高斯模糊滤镜模糊皮肤,用蒙版控制范围,去掉较为明显的杂色及瑕疵.可以高斯模糊重复多次,去掉明显的杂色. 2.用涂抹工具处理细小的瑕疵及加强五官等部位的轮廓: 3.整体美白及润色 ...

  4. elasticsearch的marvel

    摘自: http://kibana.logstash.es/content/logstash/plugins/input/syslog.html 一:marvel介绍 marvel 是 Elastic ...

  5. Following a Select Statement Through Postgres Internals

    This is the third of a series of posts based on a presentation I did at the Barcelona Ruby Conferenc ...

  6. Sea.js学习5——Sea.js的构建工具spm

    如果项目遵循推荐的标准目录结构: foo-module/ |-- dist 存放构建好的文件 |-- src 存放 js.css 等源码 | |-- foo.js | `-- style.css `- ...

  7. nginx location各种修饰符的匹配优先级

    这作为一个备份,方便查询,毕竟nginx的强大,必然有其复杂性! Location modifier Nginx allows you to define location blocks by spe ...

  8. LAMP平台搭建菜鸟入门级实验

    LAMP平台搭建(菜鸟入门级) mysql 安装: (1)二进制安装  二进制安装 ,执行解压配置即可.无须执行三布安装. (2)源码编译安装 安装准备工作: (1)查看系统配置:#uname -a/ ...

  9. c#检测端口是否被占用

    当我们要创建一个Tcp/Ip Server connection ,我们需要一个范围在1000到65535之间的端口 . 但是本机一个端口只能一个程序监听,所以我们进行本地监听的时候需要检测端口是否被 ...

  10. Visual Tracker Benchmark

    直接的方法: 首先将代码先拷到benchmark_v1.0/tackers/这个文件夹下,你会发现里面已有好几个算法的代码文件夹了. 这边注意了,我就是这样的,没有注意把代码拷贝进去之后要自己写一个调 ...