服务热线：0755 - 23214858发布者：万邦 目录：外贸网站设计 阅读数：50458
以前我们看到大型网站，像淘宝，京东，易迅这些大平台中有很多精美的小图标，做为网页设计师，不免会涮一下他们的源代码，以示敬重。我们在查看代码中，发现css中的常常包含一个张图片，那些小图标都集合在一起，在一个png图片文件中，关于这个图片定位的问题，很多新手搞得有点头晕，不知道如何来定位。
万邦资深外贸网站设计专家，在这里跟大家一起来分享这个技术点，掌握后，一点都不难。
首先，我们要先搞清楚一个概念，如何这个概念不清楚，怎么定位都是错的，而且有些网上的视频讲得并不清楚，会产生的误解。这个概念就是x轴和外轴，我们的显示器以左上角为起点走，水平为x轴，垂直为y轴，左上角就是原点坐标为0，0.。很多新手在这个地方会产生误解，以为所以有的定位，都是以显示器的左上角这里为起点来计算。这里就是大错特错了。学不好的关键原因就是在这里了。首先我们来说明一下正和负。为什么在background的属性中常会看到background:url(....) -168px -98 no-repeat; 这样类似的写法，现在我们来说说这个正和负， 我们在以左上角的为起点，水平方向往右就是正，彺左就是负； 垂直方向，往下就是正，往上就是负。这个概念不用问这么多，记住，就是这定律。知道了正和负，我们就知道什么时候用正，什么时候用负。
刚刚上面有讲到这个左上角为准，很多新手以为我们定位的这个背景图是以显示器的左上角为准，这是错的。哪到底以哪里为准呢，外贸网站建设专家万邦告诉大家，以你要进行使用背景的这个容器（div）的左上角为准，不是以显示器的左上角为准的。所以这一点搞清楚后就知道根源了，就不会弄不清楚以哪个对方来做参照。
知道了参照点，又知道了正，负值。基本上完成了80%了，现在最重要的一点来了，也是大家最关心的一点，就是那个数值是怎么计算的。其实很简单，我们以所在这个div的左上角做为参照点，要想把这个背景图中的某个图标取出来，就很好定位了。
在定位图片的时候，不用考虑html中的div所在的位置，你只需要知道你的这张png图片中，你要截取的图标的左上角离这张图片的左上角的横向距离和垂直的距离，如果不知道，可以在photoshop中的测量一下，拉一个虚线框，看信息就知道了。上面图中我用橙线画出来了，就是第一个蓝色图标距离图片左上角的距离是水平方向位是4px， 垂直距离是19px，所以如果我们要想在div中显示出来这个图标，那我就知道了，我们知道这个图标的左上角就是跟我们的div的左上角是稳合的。所以我们只需要把这张图片水平方向要向左移4个px，然后还要向上移19px，这样这个图标就出现在了左上角了，但是这样就可以了吗，还不行，我们要取的这个是这个小图标，如果只是做到这里，就会发现这张图片的地方都会出现，好的，如果让其它不出现，怎么办呢，这个时候，就要来给这个div设定大小了，这个小图标是宽度是10px，高度是9px， 好的，我们只需要将这个div的width：10px; height:9px; 即可取出来这个小图标了。
取图标的方法就讲到这里了。
还有一个就是大家常会问，如何重复一个背景呢，我们在做外贸网站设计的时候，经常头部的某些地方要重复背景，比如渐变效果，这个地方就要特别说明一下，如果要做这样的效果，那么在设计的背景图的时候，一定要将重复的地方在背景图片的设计中横向或垂直方向把重复的图标占满分水平或垂直方向，如下图
，如果要使用这个水平的重复的效果，就一定要在这张图片中设计到满，然后在css 应用repea-x即可。垂直方向也是同理。
上一篇: 外贸网站设计css的常用选择器技术详解
© 2008-
2024 by Wanbong Inc. All Rights Reserved. 粤ICP备14092676号