我想用这张图片制作css精灵
我的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开始(左上角)并且必须取正值不是吗?出了什么问题?
答案 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;
}