background-position详解
一.background-position:left top;
背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%;
二.background-position:right bottom;
背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。等同于background- positon:100%,100%;也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器 (container)的高度-背景图片的高度
三.background-position:500px 15px;。
背景图片从容器(container)左上角的地方向右移500px,向下移15px,超出的部分隐藏。
四.background-position:-500px -15px;。
背景图片从容器(container)左上角的地方向左移500px,向上移15px,超出的部分隐藏。
五.background-position:50% 50%;。
等同于left:{容器(container)的宽度—背景图片的宽度}*left百分比,超出的部分隐藏。等同于right:{容器(container)的高度—背景图片的高度}*right百分比,超出的部分隐藏。
六.background-position:-50% -50%;。
等同于left:-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)},超出的部分隐藏。等同于 right:-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)},超出的部分隐藏。
总结:利用div大小和十字架原理,可以用background-position属性实现大图里面抠取小图。
MDN上对<position>
值解释是:一种CSS数据类型,2D坐标空间,用来设置相对盒子的坐标。
我们经常使用的background-position
的值就是<position>
值,最近刚介绍的object-position
的值也是<position>
值。
<position>
值支持1~4个值,可以是具体数值,也可以是百分比,也可以是left
, top
, right
, center
, bottom
关键字。可参考下图经典示意:
如果偏移没有相应的关键字,则会被认为是center
, 因此,background-position:top center
可以直接写作background-position:top
。
如果同时出现3个值或4个值,则表示可以指定偏移的相对位置,这是CSS3新特性,现代浏览器下才支持。包括:Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+ .
例如:
background-position: right 40px bottom 20px;
效果则是:
您可以狠狠地点击这里:background-position 4值效果Demo
哇哦,IE9都支持,应该可以愉快地使用了吧!抱歉,我要泼点冷水。貌似Android的支持有些糟糕,据说:Android 4.4才支持,Android 4.0~4.2都不支持。因此,我们在实现此类效果的时候,可能还需要留一手,如下,使用calc
计算:
background-position: calc(100% - 40px) calc(100% -20px);
使用calc
计算总体来说兼容性好一点,但是,IE9浏览器下,根据caniuse的说法,会让IE9浏览器奔溃。
因此,实际使用还需要根据场景分别或hack处理。
百分比单位background-position
中的百分比单位是个很有意思的东西。其表现与CSS中其他的百分比单位表现都不一样。
例如,一个图片:
img { position: absolute; left: 100%; }
一定是在父容器外部。但是,在<position>
值中,却是不一样的表现。
我们可以看下这个iframe示意:
其中,上面的妹子是background-position
百分比,下面的50%透明的妹子是left
百分比,可以看出两者的定位差异。
这就是为何background-position:100% 100%
是定位在容器右下角的原因。
那<position>
值对应的容器坐标位置该如何计算呢?
实际上是有一个公式的:
positionX = (容器的宽度-图片的宽度) * percentX;
positionY = (容器的高度-图片的高度) * percentY;
因此,当background-position:100% 100%
时候,实际定位值就是容器尺寸和图片尺寸的差异,于是,就有了右下角定位效果。
有个这个公式,我们也能理解百分比负值的一些表现了,比方说你觉得下面两行CSS对应图片的表现是?
background-position: -50% -50%; object-position: -50% -50%
是不是觉得应该是定位在容器的左上角,同时有部分图片超出容器左上角隐藏不可见,就类似上面这个截图:
但是,实际上,不好意思,可能是会下面这种效果(此截图来自这里,您可以狠狠地点击):
接近于下面CSS的效果:
background-position: 40px 10px;
深受传统百分比定位迷惑的我们可能一时间会想不通,明明是个负值百分比定位,怎么会是一个正值效果呢?这不科学啊!
但是,我们套用<position>
百分比值计算公式,就豁然开朗了!
因为图片的尺寸大于容器尺寸,所以:
- (容器的宽度-图片的宽度) * -50% 的结果是个正值;
- (容器的高度-图片的高度) * -50% 的结果也是个正值;
background-position详解的更多相关文章
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- [TimLinux] CSS float和position详解
1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它 ...
- CSS中position详解与常见应用实现
在web前台开发时候,我们必不可少的会用到postion属性进行布局定位.今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在CS ...
- Kooboo CMS - Html.FrontHtml.Position 详解
DataContract 数据契约 http://www.cnblogs.com/Gavinzhao/archive/2010/06/01/1748736.html https://msdn.micr ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
- position详解
本文旨在普及一下position的用法,CSS中position的使用率相当之高,对于新入行的小白,不仅要知其然,还要知其所以然. position(定位类型),主要有4种属性值 : static.f ...
- CSS background 属性详解
CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...
- CSS定位之position详解(转载)
本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html position属性 在前端中,position是很常见的属性.通过这 ...
- 定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
随机推荐
- Java 运行时数据区域
1. 整体分类 程序计数器 虚拟机栈 本地方法栈 Java 堆 方法区 运行时常量池 直接内存 2. 程序计数器 每个线程一个计数器,线程的私有内存 指向的是字节码的内存地址? 如果线程执行的是 Ja ...
- SQL Server 2008各版本介绍区别(包含企业版 开发者版 标准版 Web版 工作组版 Express版 Compact版)
SQL Server 2008分为SQL Server 2008企业版.标准版.工作组版.Web版.开发者版.Express版.Compact 3.5版,其功能和作用也各不相同,其中SQL Serve ...
- 如何迎接新的 .NET 时代
看完.NET 基金会. Roslyn 编译器 ,应该已经能慢慢了解,现在所谓的“.NET 开源”.“.NET Open Source”并不是完全把现有的 .NET Framework 整个打开(虽然这 ...
- C#学习笔记-模板方法模式
题目:同学摘抄老师给的试卷并给出自己的对应的答案. 实现: static void Main(string[] args) { Console.WriteLine("学生甲抄的试卷:&quo ...
- JavaScript高级编程———数据存储(cookie、WebStorage)
JavaScript高级编程———数据存储(cookie.WebStorage) <script> /*Cookie 读写删 CookieUtil.get()方法根据cookie的名称获取 ...
- JavaWeb学习总结(二):Http协议
一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的 ...
- 【PyQt5 学习记录】004:简单QThread笔记
在文本编辑框中每隔几秒添加一行文本,代码如下: #!/usr/bin/python3 # -*- coding:utf-8 -*- import sys from PyQt5.QtWidgets im ...
- Angular进阶教程三
7 总结 angular上手比较难,初学者(特别是习惯了使用JQuery的人)可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制. 7.1页面效 ...
- docker pull提示x509错误的对应方法
在一台虚拟机上使用docker pull时出现了x509错误,相关原因与对应方法简单memo如下. 错误现象 在使用docker pull从dockerhub上下载镜像时提示如下错误 docker: ...
- MUI框架-08-窗口管理-创建子页面
MUI框架-08-窗口管理-创建子页面 之前写过这一篇,不知道为什么被删了,我就大概写了,抱歉 创建子页面是为了,页面切换时,外面的页面不动,让 MUI 写出来的页面更接近原生 app 官方文档:ht ...