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 ...
随机推荐
- sphinx.conf 详解
sphinx的配置文件是在配置的时候最容易出错的了: 我们先要明白几个概念: source:数据源,数据是从什么地方来的. index:索引,当有数据源之后,从数据源处构建索引.索引实际上就是相当于一 ...
- 升级vs工程到vs2010(以上)工程找不到OutputDebugStr报错
原因是不同版本的系统宏的不同导致报错,OutputDebugStr,它在vs2005的头文件里定义在vs安装目录下的平台sdk目录下的mmsysytem.h, 而到vs2013下这个文件被放到了系统目 ...
- Github 笔记
在本地创建并切换 git checkout -b your_branch_name 把本地分支的修改提交到远端的分支上 git push origin local_branch_name:remote ...
- Cacti-安装和使用详解
Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具.Cacti是通过 snmp get来获取数据,使用 RRDtool绘画图形,而且你完全可以不需要了解RR ...
- unbuntu server (linux系统)下面安装 lamp
1.sudo apt-get update 2.sudo apt-get install apache2 3.检查是否安装成功: apache2 -v 4.sudo apt-get update ph ...
- mvc 4 razor语法讲解和使用
1.这里的 @{Layout="文件路径";} 代码块指定了整个项目默认所使用的布局文件(如图:) @RenderBody()对于所有的页面默认的情况下都会使用这个布局(Web ...
- 类似于C# using() java 语法
From : https://www.infoq.com/news/2010/08/arm-blocks try(Jedis jedis = jedisPool.getResource()){ S ...
- SQL2005:SQL Server 2005还原数据库时出现“不能选择文件或文件组XXX_log用于此操作的解决办法
SQL2005 还原数据库失败,提示如下: SQL Server 2005还原数据库时出现“不能选择文件或文件组XXX_log用于此操作的解决办法 出现错误时操作步骤为:右击数据库--->任务- ...
- Install Slax on USB device (Slax U 盘安装)
Slax is a modern, portable, small and fast Linux operating system with a modular approach and outsta ...
- PowerDesigner里数据表里AUTO_INCREMENT(自增)的设置
使用流程: File->New Model->Model types->Physical Data Model->Physical Diagram 在下边DBMS里选择:MyS ...