CSS background-position 属性
来源:互联网 发布:最好用的数据恢复软件 编辑:程序博客网 时间:2024/05/01 20:52
只有理解了此属性的含义,才能真正的使用Css的Sprites技术。
定义
background-position 属性设置背景图像的起始位置。[相对于父元素]
继承性:NO
说明
background-image 属性会在元素的背景中设置一个图像。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
JavaScript 语法
CSS 属性也可通过一段 JavaScript 被动态地改变。
脚本语法:
object.style.backgroundPosition="bottom center"
例子
body{
background-image:url(stars.gif);
background-repeat:no-repeat;
background-position:top left;
}
body{
background-image:url(stars.gif);
background-repeat:no-repeat;
background-position:0% 0%;
}
可能的值
值
描述
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
如果您仅规定了一个关键词,那么第二个值将是"center"。
默认值:0% 0%。
x% y%
第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。
xpos ypos
第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值,另一个值将是50%。
您可以混合使用 % 和 position 值。
下面是重点:对坐标为负值的理解
下面是我要用到的一个背景图
测试例子:
HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片,
在浏览器中看到的效果:
从上图可以看到:当为background-position:0 0;时图片的左上角与DIV的左上角是重合的,当我们定位于background-position:-50px -50px;时发现图片向左上,移动了,也就以DIV的左上角为中心,图向左移动了50PX,向上也移动了50PX.第三个示例就是上值的情况图移动的效果.这个应该是好理解的.
总结一下就是以上都是以DIV的0,0点为参考点图片移动,假如把DIV区解释为一个坐标轴,图向左,上都为负,向右,下为正值.
好象说这么多你也记不住,那我就告诉你,你应该记住什么吧!
在实践中多数情况是知道一个图的位置要如上图中那个黄色的点,我们应该在效果图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,在图上的量法就看下图(这张图相当于你用的效果图或称设计图),记住这张图相信你一定能把握背景图负值的方法了
- CSS background-position 属性
- CSS background-position 属性
- CSS background-position 属性
- CSS background-position 属性
- CSS background-position属性
- CSS之background-position属性
- css背景属性background-position如何理解?
- CSS中背景图片位置属性background-position
- background-position 一个css中的常用属性
- CSS属性之background-position理解
- CSS中背景图片的属性:background-repeat、background-position、background-size
- CSS background-position Property
- CSS background-position用法
- background-position属性
- background-position属性用法
- background-position属性
- CSS之Background-Position left right center top buttom属性
- CSS背景图像位置属性background-position百分比详解
- SQLyog Enterprise 8.14 企业版
- 增加一列跟删除一列的Sql语句
- 看完think in java第8章后的想法以及对java 1.5以后版本泛型的学习笔记
- 单件模式之C++实现
- 数来宝
- CSS background-position 属性
- 颜色预警
- 草根堂家教中介系统源码
- 软件开发经验总结——客观地认识程序员心中的恐惧
- 如何制作分栏式报表
- _dButton.au3
- reactos操作系统实现(87)
- 软件开发经验总结——解读高速读书之秘
- 软件开发经验总结——读源代码的艺术