CSS3 background-size属性兼容
background-size是CSS3新增的属性,但是IE8以下还是不支持
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 也不支持。
一、让IE7 IE8支持CSS3 background-size属性
由于 background-size 是 CSS3 新增的属性,所以 IE 低版本自然就不支持了,但是老外写了一个 htc 文件,名叫 background-size polyfill,使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中,并重新计算宽度、高度、left、top 等值,模拟 background-size 的效果。
使用方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让IE7 IE8支持CSS3 background-size属性</title>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: url(http://cdn.dowebok.com/139/images/bg.jpg) center no-repeat;
background-size: cover;
-ms-behavior: url(css/backgroundsize.min.htc);
behavior: url(css/backgroundsize.min.htc);
}
</style>
</head> <body> </body>
</html>
局限性
background-size polyfill 虽然可以模拟 background-size 属性,但并不能完全模拟,毕竟 background 方式和 img 方式还是有区别的,主要的支持情况如下:
支持
- 背景图像的正确位置和大小
- 浏览器缩放时及时更新
- 更新图片(替换等)时及时更新
不支持
- 多个背景(多重背景)
- 4 个值的 background-position
- 背景重复
- 非默认值的 background-[clip/origin/attachment/scroll]
由于 background-size polyfill 需要进过复杂的计算,所以可能会出现图片“一闪”的情况。并且 .htc 文件还不能跨域,使用 CDN 的需要注意。
虽然 background-size polyfill 有一定的局限性,但总比没有好,在某些情况下还是一个很好的选择。
二、让IE8支持CSS3 background-size属性
通过滤镜来实现这样的一个效果。
width: 100%;
min-height: 100%;
background: url("../images/map.png") no-repeat;
background-size: 100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='file:///E:/idea-project/html/nongkeyuan/assets/images/map.png',
sizingMethod='scale');
注:路径要是绝对路径
CSS3 background-size属性兼容的更多相关文章
- CSS3 background属性
background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...
- css3 background
background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- JS控制CSS3,添加浏览器兼容前缀
不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容.比如: div { transform: rotate(30deg); ...
- CSS3 : transition 属性
CSS3的 transition 属性用于状态过度效果! 1.语法: transition: property duration timing-function delay; -moz-transit ...
- CSS3浏览器私有属性
CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分.因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性.我们在书写CSS3代 ...
- background复合属性详解(上):background-image
background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...
- CSS3利用text-shadow属性实现多种效果的文字样式展现
一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
随机推荐
- node基础—process对象(管理进程)
process对象概述 process对象是一个全局对象,可以在任何地方都能访问到他,通过这个对象提供的属性和方法,使我们可以对当前运行的程序的进程进行访问和控制 process 对象是一个 glob ...
- 2.02-request_header_two
import urllib.request def load_baidu(): url= "http://www.baidu.com" #添加请求头的信息 #创建请求对象 requ ...
- java让数字显示千分位 mark
/** * 格式化数字为千分位显示: * @param 要格式化的数字: * @return */ public static String fmtMicrometer(String text) { ...
- Python 的几个命令行参数
1) 以 $ python 方式启动 python 解释器,之后 import 一个模块,将生成 .pyc 文件. 2) 以 $ python -O 方式启动 python 解释器,之后 import ...
- Python实现机器人聊天
今天午休的时候,无意之中看了一篇博客,名字叫Python实现机器人,感觉挺有的意思的.于是用其写了一个简单的Python聊天,源码如下所示: # -*- coding: utf- -*- import ...
- 使用ssh登录kali
SSH为Secure Shell的缩写,SSH为建立在应用层基础上的安全协议.SSH是目前较可靠,专为远程登录会话和其他网络服务提供安全性的协议.利用SSH协议可以有效防止远程管理过程中的信息泄露问题 ...
- JVM内存管理的一些思考
目录 一. 内存是怎么分配的 二. 方法区 三. java对象的生命周期 四. Class对象是在方法区还是堆中 五.java对象的大小 六. 类加载的初始化阶段 七.Class.forName和Cl ...
- 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js
做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...
- 通过 Systemd Journal 收集日志
随着 systemd 成了主流的 init 系统,systemd 的功能也在不断的增加,比如对系统日志的管理.Systemd 设计的日志系统好处多多,这里笔者就不再赘述了,本文笔者主要介绍 syste ...
- Windows下如何更新 CodeBlocks 中的 MinGW 使其支持新版本 C++
转自:http://blog.csdn.net/wtfmonking/article/details/17487705 虽然 CodeBlocks16.01 已经是最新版了,但其中的 MinGW 仍然 ...