background-size的兼容性
做响应式布局的时候,如果有背景图,我们当然希望他能够全屏100%显示,这样显得页面非常的爆满,不过这又出现了一个问题,图片的尺寸多大合适呢,现在的浏览器分辨率参差不齐,对于Firefox等高级的浏览器,使用Background-size设置为100%即可,而IE浏览器就需要不同设置。
在Firefox中,只需要用background-size则可以控制其随容器的大小而自动伸缩
picLUp{
background:url(logo.png)no-repeat;
width:100%;height:40%;
background-size:100%100%;
}
在这样的CSS控制之下,则可以在Firefox中达到背景图片随父容器大小而自动变化,达到填充效果,但是在IE之下,你会发现上面的CSS控制会很不理想,它并不会因为你有了background-size:100% 100%;而自动缩放,图片原本怎么样就怎么样显示,如果容器比图片小,则只能显示图上的一部分,那么要达到这个效果,则需要使用IE特有的滤镜。
语法
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性
- enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
- true: 默认值。滤镜激活。
- false: 滤镜被禁止。
- sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
- crop: 剪切图片以适应对象尺寸。
- image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
- scale: 缩放图片以适应对象的尺寸边界。
- src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
特性
- Enabled: 可读写。布尔值(Boolean)。参阅 enabled 属性。
- sizingMethod: 可读写。字符串(String)。参阅 sizingMethod 属性。
- src: 可读写。字符串(String)。参阅 src 属性。
说明
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
hello{
width:10%;
height:50%;
position:absolute;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale');
通过上面两种方法的介绍,我们就可以完美兼容所有的浏览器,使用CSS让背景图100%填充。
附上background-size属性:
background-size:规定背景图像的尺寸
1.length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
2.percentage:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
3.cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
4.contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
background-position:属性设置背景图像的起始位置。
1.有left,top,right,bottom,center五个值组合显示位置。如果只写第一个,第二个省略默认center。
2.x% y%:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。
3.Xpx Ypx: 第一个值是水平位置,第二个值是垂直位置。
background-size的兼容性的更多相关文章
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- CSS3中background属性的调整
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- 实用的CSS3属性和使用技巧
CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...
- Andorid-15k+的面试题。
andorid开发也做了3年有余了,也面试很多加企业,借此机会分享一下,我们中遇到过的问题以及解决方案吧,希望能够对正在找工作的andoird程序员有一定的帮助. 特别献上整理过的50道面试题目 1. ...
- css 初级进阶
摘自:https://www.jianshu.com/p/dcc40ccc9841 CSS中级 Class和ID选择器 CSS初级教程中我们可以使用HTML标签选择器定义样式. 同样你也可以使用Cla ...
- 解决C# WinForm Graphics绘制闪烁问题
不直接使用form的CreateGraphics创建Graphics进行绘制,可以先在Form上面放一个需要大小的PictureBox,再创建一个同大小的Bitmap,将这个Bitmap设置为Pict ...
- 前端小知识~~关于css3新增知识~~归纳总结
1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:on ...
- Android measure过程分析
作为一名Android开发人员,我们都知道一个View从无到有,会经历3个阶段: 1. measure/测量阶段,也就是确定某个view大小的过程: 2. layout/布局阶段,也就是确定其左上右下 ...
- Android应用层View绘制流程与源码分析
1 背景 还记得前面<Android应用setContentView与LayoutInflater加载解析机制源码分析>这篇文章吗?我们有分析到Activity中界面加载显示的基本流程原 ...
- 自定义控件(View的绘制流程源码解析)
参考声明:这里的一些流程图援引自http://a.codekk.com/detail/Android/lightSky/%E5%85%AC%E5%85%B1%E6%8A%80%E6%9C%AF%E7% ...
随机推荐
- Spring学习笔记--代理
静态代理 1.静态代理的角色分析(UML画图推荐使用StarUML软件) 抽象角色---一般使用接口或者抽象类来实现. 真实角色---被代理的角色. 代理角色---代理真实角色—代理真是角色后一般会做 ...
- 6.18_web服务器内容
#coding:utf-8 ''' 2018-6-18 14:47:23 创建一个静态服务器访问指定页面 http://127.0.0.1:8000/ ''' import socket from m ...
- M - Sum
XXX is puzzled with the question below: 1, 2, 3, ..., n (1<=n<=400000) are placed in a line. T ...
- ==和equal()的区别
“==”比较的是对象引用的地址相不相同 “equal()”比较的是内容是否相等
- Codeforces 1132D - Stressful Training - [二分+贪心+优先队列]
题目链接:https://codeforces.com/contest/1132/problem/D 题意: 有 $n$ 个学生,他们的电脑有初始电量 $a[1 \sim n]$,他们的电脑每分钟会耗 ...
- nginx伪静态之try_files和rewrite讲解
服务器脚本以php为例 一.伪静态是个啥? 1.说起伪静态基本上搞web开发的人,多多少少都有了解与使用,有人会说什么时候会使用伪静态?使用原生的url地址不是蛮好的吗,确实是这样的,其实 ...
- php值callback类型和匿名函数(闭包)
callback.callable类型 自PHP5.4起可以使用callable类型制定回调类型callback. 本文档基于同样理由使用callback类型信息. 一些函数如call_user_fu ...
- Instruments之Leaks学习
前言: 本篇文章,在于学习,我把别人的一些感觉好的文章汇总成了一篇,亲自实现了一下,留用于今后学习资料. 文章脉络:文章脉络: 一.内存优化 简介:Objective_C 有3种内存管理方法, 它们分 ...
- (未完成)在block内如何修改block外部变量
变量必须用__block修饰,否则编译不通过 block内部会把变量拷贝到堆区 变量从栈区copy->堆区 通过对对象取地址,打印出对象在内存中的地址 &a block不允许修改外部变量 ...
- java string和int之间的相互转化
java 中string和int之间的相互转化 1 如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); ...