CSS背景图拉伸自适应尺寸,全浏览器兼容
突然有人问我这个问题,说网上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背景图拉伸自适应尺寸,全浏览器兼容的更多相关文章
- CSS背景图拉伸自适应尺寸
.bg{ background:url(images/test.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoade ...
- CSS背景图怎么自适应全屏(手机或者电脑)
#demo{ background-img:url(../bg.png); --(1)适用于上半部分背景图片,下半部分纯色 将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器) backgr ...
- CSS背景图拉伸不变形
在线效果体验:http://hovertree.com/texiao/mobile/3.htm 请使用手机浏览器查看. css代码: .bg{ background:url(http://hovert ...
- 兼容各浏览器的css背景图片拉伸代码
需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- 项目期复习总结1:背景图合并,hack,浏览器内核前缀,伪类after before
文件夹: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合 ...
- css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...
- Lodop打印控件不打印css背景图怎么办
background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...
- css背景图片拉伸
css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...
随机推荐
- 基于redis的排行榜设计和实现
前言: 最近想实现一个网页闯关游戏的排行榜设计, 相对而言需求比较简单. 秉承前厂长的训导: “做一件事之前, 先看看别人是怎么做的”. 于是乎网上搜索并参考了不少排行榜的实现机制, 很多人都推荐了r ...
- HttpSendRequest同步请求不返回
HttpSendRequest是基于socket实现的 在工作过程中发现当发送请求时 1.当网络没有连接时 会同步返回失败 2.当发送请求时 把网线拔下也是会同步返回失败 3.但是第三种情况 发送请求 ...
- [转载]BT656/BT601/BT1120协议
[转载] BT656/BT601/BT1120协议以及DM365/DM355/DM6467上使用的YUV颜色空间说明 ITU-R BT.601和ITU-RBT.656国际电信联盟(Interna ...
- python3百度指数抓取
百度指数抓取,再用图像识别得到指数 前言: 土福曾说,百度指数很难抓,在淘宝上面是20块1个关键字: 哥那么叼的人怎么会被他吓到,于是乎花了零零碎碎加起来大约2天半搞定,在此鄙视一下土福 安装的库很多 ...
- 监听器和普通类获取springContext和context,从而获取springbean和application范围的对象
1.定义一个监听器[MyContextListener],此类里最主要获取springContext和context package my.request; import javax.servlet. ...
- 观察者模式及Java实现例子
http://www.cnblogs.com/mengdd/archive/2013/02/07/2908929.html 观察者模式 观察者模式 Observer 观察者模式定义了一种一对多的依赖关 ...
- [Spring MVC] - Interceptor 拦截器
Spring MVC中的Interceptor与Struts2的差不多. 下面是一个简单的Interceptor登陆验证例子: 1.需要在spring的配置文件中加入这段: <!-- 自定义拦截 ...
- spring mvc 和 velocity整合
java.lang.ClassNotFoundException: org.springframework.ui.velocity.VelocityEngineFactory 考虑是不是没有添加spr ...
- android学习笔记57——Service_2
Service生命周期 参考:http://codingnow.cn/android/515.html 应用程序启动服务的方式不同,其生命周期也有所不同. startService生命周期如下左图: ...
- 自动装箱(boxing)和自动拆箱(unboxing)
摘自:http://www.codeceo.com/article/java-boxing-unboxing.html Java的四类八种基本数据类型 基本类型 占用空间(Byte) 表示范围 包装器 ...