知识大全 背景图片的定位问题详解
Posted 知
篇首语:宁可枝头抱香死,何曾吹落北风中。本文由小常识网(cha138.com)小编为大家整理,主要介绍了知识大全 背景图片的定位问题详解相关的知识,希望对你有一定的参考价值。
我们在研究其他的网站的样式的时候经常会发现一种情况 就是在很多background属性里都调用同一张图片 来满足网页各个部分的使用 打开这种图片看一下 会发现这张图片上包含了很多小图片 比如
又如
这些小图片就是整图分割后的各个部分 把各个部分放在一张图片上 而不是是分别存储成单独的图片 其目的我们都知道 就是减少请求次数 节省时间和带宽
那么怎么来实现一张图片在不同的地方只显示其中的一部分呢 这就用到了我们今天要说的背景图片的定位问题 这个问题相信很多人都郁闷过 也经常有朋友问我 所以今天就系统的说一下
我们知道在用图片作为背景的时候 css要这样写 以div容器举例子 也可以是body td p等的背景 道理一样
div background:#FFF url(image) no repeat fixed x y;
这里的background的属性值依次为
#FFF 背景色 (颜色值 背景图片没有覆蓋的地方 或者没有背景图片时表现的背景色)
image 背景图片 (这里是图片的地址)
no repeat 是否重复 (图片小于容器的大小时 默认会重复排列图片以填满容器 no repeat表示不重复 只有这个时候后面的定位坐标才有用 )
fixed 背景是否随容器滚动 (有两个可选值 scroll滚动 fixed不滚动 默认是scroll)
x y 背景图像的定位 (注意 只有在no repeat下定位才有意义 这个就是今天要讲的重点)
背景图像定位中我们要明确的几点
两个值前面一个是横向的定位 我们称为x轴方向定位 后面一个值是纵向的定位 我们称为y轴方向定位 如果只有一个值 那默认的就是x轴方向 这时y轴方向就默认的是上下居中对齐 也就是center
坐标轴的原点就是对应容器的左顶点
这个坐标的y轴箭头朝下 也就是右下方(容器内部)x y的值才都为正
x y值分别表示背景图片的左顶点相对于坐标原点(也就是容器的左顶点)的值
x y的值可以用百分比或者px来表示
x y也可以用 left right top bottom center 这五个对齐方式来表示 但注意 用 left right top bottom center 来表示的时候 应用的是对齐规则 而不是坐标规则 x为left是表示图片的左边和容器的左边对齐 为right的时候表示图片的右边和容器的右边对其 y为top的时候表示图片的顶部和容器的顶部对齐 为bottom时表示图片的底部和容器的底部对齐 x y等于center的时候表示居中对齐
x y用百分比或者px表示的时候 其值可以为负数 我们应用坐标规则就很容易理解负数表示的意义 x为负数时候表示图片左顶点在容器左顶点的左侧 y为负数时表示图片的左顶点在容器的左定点的上方 也就是向左和向上超出容器的范围
下面我用几个图示来说明一下几种情况 蓝色块表示图片 虚线框表示容器(可以div td 或者直接就是body) 注意只有背景图片在容器内我们才能看见 我用白色表示可见部分 而且超出容器范围的是看不见的 我用灰色表示 容器的左顶点的坐标就是( )
第一张 背景图片和容的左上对齐 px px 也可以写成left top
第二张 背景图在容器中间 顶点坐标为正值
第三张 背景图部分在容器左上 顶点坐标为负值
到此我们可能就明白了如何用background里的定位值来准确定位一个背景图片 返回去我们看一下开始的时候介绍的两个图片 我们就是可以用 背景定位和容器内才可见这两个性质来随意的调用显示整张图片的某一部分
但是我们为了调用方便 在排列这些小图片的时候要讲究一点规则 比如 小图之间的距离通常是调用小图的容器的大小 或者距离更大一点 这样就可以避免在容器内显示出我们不愿意显示的图片!
补充一点 如果定位用的是百分比话 算法比较特殊 我举个例子
background:#FFF url(image) no repeat fixed % %;
这个时候图片应该在容器的什么位置呢 算法公式如下
图片左顶点距容器左顶点的坐标位置为
x (容器的宽度 图片的宽度)x %
y (容器的高度 图片的高度)x( %)
得到的结果应用坐标法则 差值如果为负数 百分比为正那么运算结果是负值 如果差值为负数 百分比也为负数 那么运算结果就是正数 总而言之就是这里的运算符合运算法则 把运算的结果带入坐标法则就能得到图片的位置
比如 容器是width px height px 而图片是width px height px
我们用上面的样式 可以得到图片位置为
x ( px px)* %
cha138/Article/program/net/201311/13145相关参考
怎样使用JavaServlet动态生成图片详解 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 在
知识大全 苹果6微信别人发过来的图片有个定位到聊天位置,怎么才能看到他的位置,谢谢
苹果6微信别人发过来的图片有个定位到聊天位置,怎么才能看到他的位置,谢谢1、进入微信某位好友的聊天,点击右下角【+】。2、选择【位置】。3、点击【发送位置】。4、微信开始定位,点击【定位】标志可手动定
知识大全 手机下载了一个微信虚拟定位用他登陆了一下,今天用微信登陆大部分图片加载不出来。语音听不了
手机下载了一个微信虚拟定位用他登陆了一下,今天用微信登陆大部分图片加载不出来。语音听不了建议进行以下操作:1.检查手机网络连接是否稳定,建议更换无线网络尝试。2.更新软件版本尝试。3.点击手机应用程序
JSP中文编码问题解决方法详解 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 最基本的乱码问
PHP下载文件名乱码问题详解 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 通过把Content
使用mysql作为基础数据库的应用可能会遇到一些数据库方面的性能问题我们可以通过一些方法进行问题定位以下介绍可以定位性能问题的四种方法欢迎拍砖 一开启慢查询日志 记录执行查询时间大于long_
13.你是一个合格的经理吗?你可以举一些例子吗?你是否觉得你有顶级管理人员的潜力?保证你的答案是基于成果和任务的。通过你职业生涯中的一些例子来加固你的论点。强调你的经验和精力14.当你招聘人手的时候你
准备是成功的一半如果你是一个对目前的职位不满意,正着手去在新的一年里找到一个新的职位,这篇文章就是你的一个帮手。工作面试是你去面对未来的老板的征途中最重要的一个过程。你必须像进行一个击剑锦标赛或著一个
在使用标准缓冲溶液进行定位调节时,应注意什么问题?参考答案:1、要确定pH缓冲液的时效性(pH4几周后会发霉;pH7六周后.pH9四周后应重新配制)。2、选用一种与被测水样pH值相接近的缓冲液作为定位
在使用标准缓冲溶液进行定位调节时,应注意什么问题?参考答案:1、要确定pH缓冲液的时效性(pH4几周后会发霉;pH7六周后.pH9四周后应重新配制)。2、选用一种与被测水样pH值相接近的缓冲液作为定位