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 ...
随机推荐
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
- cocoapod的下载安装解释
本文不提供cocoapod的下载安装的流程,因为那些只要百度一下就有的东西,而是对里面的代码进行解释,希望对iOS小白安装cocoapod有帮助: 一.cocoapod是什么? 开发过程中,我们会用到 ...
- 国外程序员整理的 C++ 资源大全(转)
原文:http://www.csdn.net/article/2014-10-24/2822269-c 关于 C++ 框架.库和资源的一些汇总列表,由 fffaraz发起和维护. 内容包括:标准库.W ...
- Windows下RCNN的使用
RCNN 一种把目标图像分割转化为CNN分类问题进行目标检测的方法. 以下转自魏晋的知乎回答 Ross B. Girshick的RCNN使用region proposal(具体用的是Selecti ...
- 关于MySql的DBHelper类以及数据分页
前端: <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix=& ...
- vs2010中使用Nunit测试c#代码结果的正确性
本文转载自:http://blog.csdn.net/pukuimin1226/article/details/8112151 http://www.nunit.org/index.php?p=dow ...
- Django常用命令及参数配置(Django 1.8.6)
常用命令 #新建Django项目 django-admin startproject mysite(项目名) #新建一个APP cd mysite python manager.py startapp ...
- mfc_Demo
内涵图
- git 服务器的搭建
文章转载地址:http://www.linuxidc.com/Linux/2015-05/117502.htm 亲测可行,已经自己搭建一个正在使用中,搭建完成后,结合着pycharm +git,就能直 ...
- IIS+php+mysql 环境搭建
1.安装IIS,并安装CGI角色: 2.安装php manager IIS扩展: 3.安装php: 4.配置php manager, 添加php php-cgi.exe执行路径 : 5.下载mysql ...