CSS background-position 属性

最新推荐文章于 2024-09-23 11:30:11 发布

原创最新推荐文章于 2024-09-23 11:30:11 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #class #javascript #div #xhtml #html

Web Develop Base 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了CSS中的background-position属性，包括其定义、JavaScript动态修改方法、常见值及其含义，并通过实例展示了如何使用负值进行精确的背景图片定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只有理解了此属性的含义，才能真正的使用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 值。

下面是重点：对坐标为负值的理解

下面是我要用到的一个背景图

测试例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <head> <mce:style type="text/css" ></mce:style><style type="text/css" mce_bogus="1">.style1,.style2,.style3{ float:left; width:162px; height:162px; background:#CCCCCC url(http://www.purecss.cn/attachments/month_0705/r2007523163838.gif) 0 0 no-repeat; border:1px dotted #999999; color:red; margin-right:10px; } .style2{ background-position:-50px -50px; } .style3{ background-position:100px 100px; } .blue{ color:blue; }</style> </head> <body> <div class="style1"> x:0,<span class="blue">y:0</span> </div> <div class="style2"> x:-50px,<span class="blue">y:-50px</span> </div> <div class="style3"> x:100px,<span class="blue">y:100px</span> </div> </body> </body> </html>

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;这样就定义好了,在图上的量法就看下图（这张图相当于你用的效果图或称设计图），记住这张图相信你一定能把握背景图负值的方法了