php css定位到图片上,css 背景定位切图技巧总结

什么图片整合在一起。

(1)一般情况下，背景repeat-x的放在一起，块背景(不会重复的背景)放在一起，这些是和实现效果挂钩的，背景x轴重复的放在一起，是因为会重复显示，如果和其他图片放在一起，那么重复时就会把它右侧的所有内容都重复显示，所以x轴或者有需要的话y轴重复的背景需要单独放在一起；块背景即为不重复的背景，这类图片因为不重复，所以把这些图片放在一起，不用担心上下左右的地方会显示出来。其实一句话，重复的背景放在一起，不重复的背景放在一起，就这么简单。

(2)坐标定位，其实除了麻烦之外没啥特别难的，我用的方法不知道是不是最好的，但是我觉得挺好用的，把所有图片用photoshop整合到一张图片里面后，先确定你要用的那个图片背景，然后用方形选区工具沿着此图片的上边一直拖到整张图片上边形成一个选区，选择背景图层并ctrl+c复制，然后点新建，会有一个高度，这个高度就是图片y的坐标；同理，沿着此图片的左边到整个图片的左边画一个选区再复制，然后新建，宽度就是x的坐标，这样得出的坐标是绝对准确的，如果你的整合图片做的好，确定坐标很容易。

图片定位实战举例：

比如这样一张图片：

比如这样一张图片：

现在我们要给两个文字链接添加“购买”和“赠送他人”的背景图片，然后让文字不显示，另外按钮的效果还是存在的！

代码如下：

01

02

03

.toolbuy{

04

background:url('listnavon.gif')

no-repeat scroll 0 -46px transparent;

05

display:block;

06

overflow:hidden;

07

text-indent:-999em;

08

width:47px;

09

}

10

.button{

11

background:url('listnavon.gif')

no-repeat scroll -117px 0 transparent ;

12

display:block;

13

overflow:hidden;

14

width:75px;

15

height:23px;

16

text-indent:-999em;

17

}

18

19

20

购买

21

赠送他人

22

23

效果如下：

我总结的经验如下：

1、把图片的左上角当做是X轴和Y轴的交叉零点，坐标为(0,0)

2、可以用画图工具或者是QQ截图工具测出图片到“购买”上边沿的举例为46px，因为是Y轴方向，这时背景图片的Y轴就用-46px来取值，另外因为“购买”图标左边沿在X轴方向上的举例为0，因此背景图片的X轴值为0.因此定义背景图片的代码如下：

1

background:url('listnavon.gif')

no-repeat scroll 0 -46px transparent;

3、让购买的文字链接不显示“购买”文字，可以用

1

text-indent:-999em;

来控制

4、对于溢出的部分就采用隐藏的效果

以上是对购买这个按钮写的css代码，那么如何写赠送他人的背景图片呢？

道理是一样的，赠送他人的图标的Y轴值为0，X轴方向上的值为117px，那么我们在控制背景图片的X、Y轴的值为(-117px,0)如下：

1

background:url('listnavon.gif')

no-repeat scroll -117px 0 transparent ;

其他差不多的原理

如果要获取在某张大图片中间的某张小图标，那么可以确定，背景图片的X轴和Y轴的值都必须是负数了，上面的例子有0的存在是因为他们一个是靠X轴一个是靠Y轴的；另外，如果X轴或者Y轴的值是正数的话，他就会按照页面的左上角根据提供的距离进行往右下角移动，这个可以在实际过程中自己测试下

任何人都有自己的习惯，自己的习惯都是从实践中摸索出来的，我的方法未必是最好的，是最适合你的，只是一块砖，能不能引出你的玉，就需要你不断的自己实践并积累经验，最后找到最适合自己的方法。