background-size是CSS3新增的属性,IE8以下不支持,通过滤镜实现background-size效果

background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比);
background-size :cover; // 扩展图片来填满元素(保持像素的长宽比);
background-size :100px 100px; // 调整图片到指定大小;

background-size :50% 100%; // 调整图片到指定大小,百分比相对于包含元素的尺寸。

浏览器兼容:

IE 和遨游不支持;

Firefox 添加私有属性 -moz-background-size 支持;

Safari 和 Chrome 添加私有属性 -webkit-background-size 支持;

Opera 不支持 background-size 属性,添加其私有属性 -o-background-size 也不支持。

通过浏览器私有属性:

  1. background:#00ff00 url(img.jpg) no-repeat;
  2. -moz-background-size:60% 80%;
  3. -webkit-background-size:60% 80%;
  4. -o-background-size:60% 80%;}
  5. background-size:60% 80%;

IE专属实现方式:

  1. background-size:cover;
  2. background-repeat:no-repeat;
  3. background-image:url(../../../easimages/core/claim/ht_btn_bg3.png);
  4. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../easimages/core/claim/ht_btn_bg3.png',sizingMethod='scale');

注意: 路径要是一样的并且是绝对路径

IE浏览器兼容background-size的更多相关文章

  1. CSS在不同浏览器兼容问题,margin偏移/offset溢出等

    margin在垂直取值时取最大值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  2. video视频播放以及主流浏览器兼容

    直接看代码吧! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  3. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  4. CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

    页面模板 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 ...

  5. 浅谈CSS hack(浏览器兼容)

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  6. jQuery-1.9.1源码分析系列(七) 钩子(hooks)机制及浏览器兼容

    处理浏览器兼容问题实际上不是jQuery的精髓,毕竟让技术员想方设法取弥补浏览器的过错从而使得代码乱七八糟不是个好事.一些特殊情况的处理,完全实在浪费浏览器的性能:突兀的兼容解决使得的代码看起来既不美 ...

  7. 关于浏览器兼容问题及hack写法

    浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...

  8. 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

  9. 【转】Web前端浏览器兼容初探

    原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...

  10. CSS背景图拉伸自适应尺寸,全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

随机推荐

  1. bzoj 3745 [Coci2015]Norma——序列分治

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3745 如果分治,就能在本层仅算过 mid 的区间了. 可以从中间到左边地遍历左边,给右边两个 ...

  2. bzoj2257瓶子与燃料——最大公约数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2257 可以知道最终能够导出的燃料一定是瓶子容量的gcd的倍数,所以此题转化为求n个数中k个数 ...

  3. PLSQL ORA-12154 TNS无法解析指定的连接标识符

    若你的机子上Windows 64位操作系统, 将PL Sql 的默认安装目录  Program Files (x86) 文件夹改为Program Files 或者别的便可以了

  4. Deques and Randomized Queues

    1. 题目重述 完成三个程序,分别是双向队列,随机队列,和随机队列读取文本并输出k个数. 2. 分析 2.1 双向队列 题目的性能要求是,操作时间O(1),内存占用最大48n+192byte. 当使用 ...

  5. spark学习之简介

    1.   Spark概述 1.1.  什么是Spark(官网:http://spark.apache.org) Spark是一种快速.通用.可扩展的大数据分析引擎,2009年诞生于加州大学伯克利分校A ...

  6. ASP.NET Core会议管理平台实战_汇总贴

    ASP.NET Core会议管理平台实战 课程地址:https://ke.qq.com/course/389673?from=800004097#term_id=100464670 ASP.NET C ...

  7. C/C++内存检测工具Valgrind

    内存检测Valgrind简介 Valgrind是运行在Linux上一套基于仿真技术的程序调试和分析工具,作者是获得过Google-O'Reilly开源大奖的Julian Seward, 它包含一个内核 ...

  8. 为Docker容器设置静态IP

    此文已由作者袁欢授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 创建docker容器 docker run -it --name=yh -h yh --net=none de ...

  9. Linux下新建一个站点

    Apache+nagix使用Lnmpa创建一个新的站点 我们在部署服务器的时候通常会遇到需要分域名和分应用部署,那么如何通过Apache+nagix创建一个新的站点服务呢 LNMPA这种架构有什么优势 ...

  10. POJ3735【矩阵快速幂】

    逛了一圈...觉得这篇讲的比较清楚:传送门~ 简要概括: 1.线性代数的知识,单位矩阵的利用:(如果不知道单位矩阵的,先去补习一下线代,做几题行列式就会了): 2.然后构造好矩阵以后,直接做M次乘积运 ...