Css背景位置坐标

时间:2012-12-13 13:02:49

标签: css position background-image css-sprites background-position

我想用这张图片制作css精灵

http://oi49.tinypic.com/14nobhd.jpg

我的HTML代码;

<div class="top"></div>
<div class="bottom"></div>
<div class="right"></div>
<div class="left"></div>

和css代码;

.left{
background : url(arrw.png) no-repeat 0 0;
width:12px;
height:19px;
}

.right{
background : url(arrw.png) no-repeat -29px 0;
width:12px;
height:19px;
}

.top{
background : url(arrw.png) no-repeat -12px 0;
width:16px;
height:12px;
}

.bottom{
background : url(arrw.png) no-repeat -12px -12px;
width:16px;
height:12px;
}

这项工作很完美,但我不明白为什么给出背景位置的负值。不是那个坐标系并且我们不是必须为此给出正面的价值吗?位置值从0开始(左上角)并且必须取正值不是吗?出了什么问题?

2 个答案:

答案 0 :(得分:2)

您正在使用的精灵图像通常比显示它们的框大。如果仅包含图像,它将位于左上角。现在,如果要显示溢出到框右侧的图像部分,则需要将图像向左移动。但由于默认情况下图片已位于left: 0;,因此您需要设置负值以将其向左移动。

想想两张纸,一张在其中有一个洞,另一张在第一张纸后面移动。要查看位于其右下方的后板的一部分,您需要移动到左上角。因此,当通过一个孔看到它/在一个盒子里显示图像时,位置方向与你想要移动后板的方向相反。

答案 1 :(得分:0)

好吧,拍摄一个背景图像,其位置为0的div。添加它,将其向下移动,向右移动。减法将其向上移动到左侧。 0 0是该系统的基础。

如果这让您烦恼,可以将代码更改为:

.left{
background : url(arrw.png) no-repeat top left;
width:12px;
height:19px;
}

.right{
background : url(arrw.png) no-repeat top right;
width:12px;
height:19px;
}

.top{
background : url(arrw.png) no-repeat top center;
width:16px;
height:12px;
}

.bottom{
background : url(arrw.png) no-repeat bottom center;
width:16px;
height:12px;
}