background-position的百分比
看到了几篇文章,总结下先:
1. background-position是依赖于no-repeat的,在repeat的状态下和默认的状态下(默认即为repeat),background-position是不起作用的。
2. 其余的尚好理解,主要说一下百分比的background-position。
偷个懒,从脚本之家看到一篇不错的文章,(我感觉肯定也是脚本之家从其他地方复制的),转在这里。主要是因为原文章加了图,所以看起来分外的清晰。
------------------------------------------------------------------------------------------------------------------------------------------
这些小图片就是整图分割后的各个部分,把各个部分放在一张图片上,而不是是分别存储成单独的图片,其目的我们都知道,
就是减少http请求次数,节省时间和带宽。
我们知道在用图片作为背景的时候,css要这样写,以div容器举例子,也可以是body、td、p等的背景,道理一样。
div{ background:#FFF url(image) no-repeat fixed x y;}
这里要提及的:
no-repeat 是否重复:(图片小于容器的大小时,默认会重复排列图片以填满容器,no-repeat表示不重复,只有这个时候后面的定位坐标才有用。)
fixed 背景是否随容器滚动:(有两个可选值,scroll滚动,fixed不滚动,默认是scroll)
x y 背景图像的定位:(注意,只有在no-repeat下定位才有意义。这个就是今天要讲的重点)
背景图像定位中我们要明确的几点:
1、两个值前面一个是横向的定位,我们称为x轴方向定位。后面一个值是纵向的定位,我们称为y轴方向定位。
如果只有一个值,那默认的就是x轴方向,
这时y轴方向就默认的是上下居中对齐,也就是center。
2、坐标轴的原点就是对应容器的左顶点。
3、这个坐标的y轴箭头朝下,也就是右下方(容器内部)x y的值才都为正。
4、x y值分别表示背景图片的左顶点相对于坐标原点(也就是容器的左顶点)的值。
5、x y的值可以用百分比或者px来表示。
6、x y也可以用“left、right、top、bottom、center”这五个对齐方式来表示,
但注意:用“left、right、top、bottom、center”来表示的时候,应用的是对齐规则,而不是坐标规则。
x为left是表示图片的左边和容器的左边对齐,为right的时候表示图片的右边和容器的右边对其,
y为top的时候表示图片的顶部和容器的顶部对齐,
为bottom时表示图片的底部和容器的底部对齐,x y等于center的时候表示居中对齐。
7、x y用百分比或者px表示的时候,其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义,
x为负数时候表示图片左顶点在容器左顶点的左侧,
y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。
下面我用几个图示来说明一下几种情况,蓝色块表示图片,虚线框表示容器(可以div,td,或者直接就是body),
容器的左定点的坐标就是(0,0)。
第一张,背景图片和容的左上对齐,0px 0px 也可以写成left top
第二张,背景图在容器中间,定点坐标为正值
第三张,背景图部分在容器左上,定点坐标为负值
到此我们可能就明白了如何用background里的定位值来准确定位一个背景图片,返回去我们看一下开始的时候介绍的两个图片,
我们就是可以用:背景定位和容器内才可见这两个性质来随意的调用整张图片的某一部分。
但是我们为了调用方便,在排列这些小图片的时候要讲究一点规则,比如:小图之间的距离通常是调用小图的容器的大小,
或者距离更大一点,这样就可以避免在容器内显示出我们不愿意显示的图片!
补充一点,如果定位用的是百分比话,算法比较特殊。我举个例子:
background:#FFF url(image) no-repeat fixed 50% -30%;
这个时候图片应该在容器的什么位置呢,算法公式如下:
图片左顶点距容器左顶点的坐标位置为
x:(容器的宽度-图片的宽度)x 50%
y:(容器的高度-图片的高度)x(-30%)
得到的结果应用坐标法则,差值如果为负数,百分比为正那么运算结果是负值。如果差值为负数,
百分比也为负数,那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。
比如:容器是width:600px;height:600px;而图片是width:200px;height:200px;
我们用上面的样式,可以得到图片位置为:
x:(600px-200px)*50%
y:(600px-200px)*(-30%)
如下图:
background-position的百分比的更多相关文章
- html5+css3中的background: -moz-linear-gradient 用法
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...
- html5+css3中的background: -moz-linear-gradient 用法 (转载)
转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- CSS3 Gradient 渐变
转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...
- CSS3 Gradient
CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...
- CSS3 线性渐变(linear-gradient) 兼容IE8,IE9
一.线性渐变在 Mozilla 下的应用 语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...
- 不用任何图片,只用简单的css写出唯美的钟表,就问你行吗?
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAGHCAIAAABJR31QAAAgAElEQVR4nOy9aXhc1ZUurPvcH7f73n ...
- android 项目学习随笔二(引导页 )
1.引导页 1.定义灰色.红色圆点的shape XML文件 2.定义布局文件,利用相对布局文件定位,利用线性布局加载灰色圆点,imageview加载红色圆点 3.android.support.v4. ...
- 第二篇:web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- 阅读MDN文档之StylingBoxes(五)
目录 BoxModelRecap Box properties Overflow Background clip Background origin Outline Advanced box prop ...
随机推荐
- Apache配置简单http认证
首先要说明的是这种认证是不安全的,密码是明文传输,因此很容易被各种嗅探软件嗅探到密码,只能用于简单的认证.今天上午把ownCloud卸载了,这玩 意儿中看不中用啊,原来10M的访问速度被限制成了几百K ...
- XML操作总结
在开发过程中对XML的使用不是太多,要用到时候也是想办法绕过去,最近一个同事给了一个详细的操作.分享一下 using System; using System.Collections.Generic; ...
- WinServer2008r2 机器时间格式修改
windows2008 这么高级的系统不可能改个系统的日期时间显示格式还要进注册表啊.于是有baidu,google了下终于发现了,原来还有不需要注册表的更简便方法.windows2008默认时间格式 ...
- ssh IP打通,hadoop启动失败
ssh ip 无密码打通,hadoop启动失败 报错为:host'主机名' can't be established. 纠结了接近一个多小时 之后必须ssh 主机名 , yes一下,发现hadoop能 ...
- 第五百八十三天 how can I 坚持
今天去看了个电影,日本动漫,第一次在电影院看日本动漫,<你的名字>,挺经典的.存在爱情吗?什么是爱情,哎.什么是人. 好像有点感冒了呢,说过自己很久没感冒后,往往就会感冒,这到底是怎么回事 ...
- vi 使用
1)命令 gf ,可以从光标指定的文件位置打开对应文件 :bd回来 2)http://www.cnblogs.com/wangkangluo1/archive/2012/04/12/244495 ...
- java GZIP压缩和解压
最近碰到了一个按GZIP解压指定的输入流数据,备份下 import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream ...
- visual studio code(vscode) 调试php
1.下载vscode (visual studio code). 2.安装vscode 扩展 php-debug 安装步骤见 https://marketplace.visualstudio.com/ ...
- ps 进程查看器
命令参数 a 显示所有进程 -a 显示同一终端下的所有程序 -A 显示所有进程 c 显示进程的真实名称 -N 反向选择 -e 等于"-A" e 显示环境变量 f 显示程序间的关系 ...
- dockerfile学习与详解
1,什么是dockerfile? dockerfile是相当于docker使用的一个脚本,作用是便于实现自定义的镜像image,用语docker build [OPTIONS] PATH ,只需要指定 ...