【原创】详解css用坐标来截取部分图片

bubbi7 2015-03-21

展开全文

标题好像没有表述的十分清楚，直白的说就是在很大的图片上只截取我们需要的位置上的需要大小的图片。现在大家都知道网站技术发展的很快，很多技术较大的网站已经率先的使用了。大家可以看看腾讯会员的网页http://vip.qq.com/，当你想保存其中的一个栏目图片的时候你会发现点击右键后出现的是“背景另存为”这个都能理解，就是现在的图片并不是img标签插入的而是background-image，但是当你保存后你会发现这个背景是一个很大的PNG透明图片，而上面全是网站页面的图片的集合，为什么这么做这么做的好处是什么呢？这又是怎么做的呢？因为在网上找了很多教程没有合适的所以这是自己原创的教程大家转载请表明出处。

腾讯会员的网站截图：

下载背景图片后的几个png图片：

开始言归正传：先说下好处，其实我个人认为这个比较适合用在需要换皮肤的网站上面，当网站打开后需要加载网页中的内容，网站根目录下很多文件，但是只加载关于打开的这个页面的内容，传统做法（网站相关图片都被切割成一个个的小图片）会从上到下的挨个加载网页内的文字图片，但是如果需要换皮肤（前面说到只加载网页相关内容）就意味着需要加载网页中没有的图片，这就需要一部分时间也给浏览的人带来不舒服的效果。但是如果把网页中需要的图片都做到一起，在网页开始的时候加载就完成了，这时候当你点换皮肤的时候瞬间就会完成。可能你会说按照这个方法网页开始的时候打开就会很慢，自己可以比对下，一张包含全部的png图片（820*641）是32kb，吧这些图片分开后总大小比这个要大，具体原因不说了大家自己理解或试试就知道了。

好处知道了，但这是怎么做的呢？只要明白道理这个东西真的很好理解。原理：首先定义background-image，制定图片，然后background-position结合图片的坐标，在给出要显示的图片的长宽就可以了。首先需要将PNG图片在PS中打开，用切图工具正常的切图。鼠标右键点切片后会有两组数据，左边的是当前切片在整个图片上的坐标，和贴片的长和宽，两组数据非常的重要。

下面我要在网页中显示切片2和切片6的内容，大家先看下代码

CSS代码：

body{
margin:200px 0 0 0;
padding:0px;
text-align:center;
}
.fghdfg{
background-image:url('bg_index.png');
background-position:3px 0px;
width:541px;
height:20px;
}
.fghdfg_1{
background-image:url('bg_index.png');
background-position:-570px -410px;
width:210px;
height:37px;
margin-top:100px;
}

网页代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">

</html>

显示效果：

为了方便区分界限我故意将两个背景图片的距离拉大了，解释下代码（css新手还是重头看css的基础吧）

background-image:url('bg_index.png'); --指定背景图片

background-position:3px 0px; --设置需要显示的图片的坐标（效果图的上面的那张图片）

width:541px; --div宽度

height:20px; --div高度

第一张很简单，结合切图的数据来做的，但是第二张图片的显示有点问题

background-image:url('bg_index.png');

background-position:-570px -410px;

width:210px;

height:37px;

margin-top:100px;

这个其他的和上面一样只解释下为什么这里的background-position坐标都是负数呢，不知道谁做出的css没办法论证，现在只能根据经验来说这个问题，正常坐标轴上有4个域，ABCD区，分别为A++ B+- C-- D-+ ，而这里说的坐标应该是将x轴调换方向了，也就是说X轴的箭头指向了左边，左边是正方向。