本文目录
- CSS background-position的定义和用法
- 如何动态改变background-position
- background-position这个在CSS里什么意思
- CSS background-position的用法
- background-position在css中有什么用
- background-position 是如何计算的
- background-position: center top;是什么意思
- background-position应用
CSS background-position的定义和用法
background-position 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image定义）的位置，背景图像如果要重复，将从这一点开始。提示：您需要把 background-attachment 属性设置为 fixed，才能保证该属性在 Firefox 和 Opera 中正常工作。 默认值： 0% 0% 继承性： no 版本： CSS1 JavaScript 语法： object.style.backgroundPosition=center 如何定位背景图像：body{ background-image:url(’bgimage.gif’);background-repeat:no-repeat;background-attachment:fixed;background-position:center;}背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。 background-positon:长度单位/关键字;语法中的取值包括两种，一种是采用长度单位，另一种是关键字描述。长度单位指的是px、百分比等。 当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，只不过值不是使用px为单位的数值，而是使用关键字代替。 属性值说明top left左上top center靠上居中top right右上left center靠左居中center center正中right center靠右居中bottom left左下bottom center靠下居中bottom right右下
如何动态改变background-position
修改jquery修改background-position的值可以使用jQuery CSS 操作 - css() 方法。
定义和用法
css() 方法返回或设置匹配的元素的一个或多个样式属性。
设置 CSS 属性语法
$(selector).css(name,value)
实例
将所有背景图片的位置：
$(“div“).css(“background-position“,“-12px -12px“);
拓展：设置多个 CSS 属性/值对
$(selector).css({property:value, property:value, ...})
把“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
background-position这个在CSS里什么意思
是背景图片的定位;冒号后面的属性可以是具体的数值,可以是left,right top bottom等给你个参考资料:语法： background-position : length || lengthbackground-position : position || position 参数： length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位position : top | center | bottom | left | center | right 说明： 设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。该属性定位不受对象的补丁属性(padding)设置影响。对应的脚本特性为backgroundPosition。请参阅我编写的其他书目。 示例： div { background: url(“images/aardvark.gif“); background-position: 35% 80%; } menu { background: url(“images/aardvark.gif“); background-position: 35% 2.5cm; } a { background: url(“images/aardvark.gif“); background-position: 3.25in; } body { background: url(“images/aardvark.gif“); background-position: top right; }
CSS background-position的用法
是用来定位图片的位置的，最主要使用在 一张png 上有多个logo 或者 ico 这个时候就用到background-position了。
background-position：x y x等于平行轴 y等于竖行轴，x y的取值可以为正数，也可以是负数。
background-position: left -29px; 是背景位移，background-position后面有两个属性，第一个是水平位置，第二个是垂直方向的位置，这里需注意的是两个属性的顺序
比如：
background-position: left -29px;(当中的left指从图片的最左端读起，-29px就是将图片向上移动29px,然后开始读)
扩展资料：
语法
background-position : length || length
background-position : position || position
取值
length : 百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right
注：设置或检索对象的背景图像位置，必须先指定 background-image 属性，该属性定位不受对象的补丁属性( padding )设置影响。
默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角，如果只指定了一个值，该值将用于横坐标，纵坐标将默认为 50% ，如果指定了两个值，第二个值将用于纵坐标。
如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位，对应的脚本特性为 backgroundPosition。
background-position在css中有什么用
CSS background-position 属性
定义
background-position 属性设置背景图像的起始位置
用法
这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。
提示：您需要把 background-attachment 属性设置为 “fixed“，才能保证该属性在 Firefox 和 Opera 中正常工作。
实例
如何定位背景图像：
body{ background-image:url(’bgimage.gif’);background-repeat:no-repeat;background-attachment:fixed;background-position:center;}
资料来源：http://www.zgguan.com/doc/w3c/tiy/t.asp-f=csse_background-position.htm
background-position 是如何计算的
background-position:0% 0%;这表示背景图片的左上角与容器的左上角对齐？的确是这个现象，但话不能这么说，因为 background-position 计算位置时用的并不是背景图片的左上角作为基点。background-position 是将背景图片的中心点作为基点如上图，容器是 400px * 400px，背景图片是 200px * 200px，上图是：background-position:50% 50%。那么 background-position:0% 0% 时：第一个 0% 就代表背景图片的中心点与左边红线重合；第二个 0% 就代表背景图片的中心点与上边红线生命。那么 background-position:100% 100% 时：第一个 100% 就代表背景图片的中心点与右边红线重合；第二个 100% 就代表背景图片的中心点与下边红线生命。也就是说在 0%-100% 之间，图片的中心点被限制在一个范围内：这个范围距离容器左边缘右边缘均是背景图片宽度 / 2。
background-position: center top;是什么意思
background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。如果您仅规定了一个关键词，那么第二个值将是“center“。 默认值：0% 0%。x% y%第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。xpos ypos第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。所以你设置的这个的意思是中上部
background-position应用
《html》《head》《title》绝对定位《/title》《style type=“text/css“》.position{ width: 100px; height: 100px; background: 0px -150px url(’https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/4e4a20a4462309f7faa452817a0e0cf3d6cad65e.jpg’);}《/style》《/head》《body》《div class=“position“》《/div》《/body》《/html》