<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>冰水博客-关注电子商务,互联网,Web开发IT博客 &#187; 冰水</title>
	<atom:link href="http://www.willice.com/tag/%e5%86%b0%e6%b0%b4/feed" rel="self" type="application/rss+xml" />
	<link>http://www.willice.com</link>
	<description>just go my way！</description>
	<lastBuildDate>Sun, 11 Jan 2009 10:25:30 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS高级技术之CSS Sprites</title>
		<link>http://www.willice.com/2008/10/css-sprites.html</link>
		<comments>http://www.willice.com/2008/10/css-sprites.html#comments</comments>
		<pubDate>Sat, 25 Oct 2008 02:22:09 +0000</pubDate>
		<dc:creator>冰水</dc:creator>
				<category><![CDATA[技术水贴]]></category>
		<category><![CDATA[CSS Sprites]]></category>
		<category><![CDATA[冰水]]></category>

		<guid isPermaLink="false">http://www.willice.com/?p=93</guid>
		<description><![CDATA[        前段时间找了个主题，觉得不错，就用上了，也就是我现在所用的，它是由web设计师yofox设计的,但是我觉得色调太暖和了点，个人比较喜欢冷调的配色，因为这样才适合我的网名“冰水”^_^，于是我就启动了photoshop准备进行大改造，发现原来那主题的图片都是拼在一块的，不知道如何下手，今天才知道原来这就叫CSS Sprites技术。下面就来介绍下什么叫CSS Sprites技术吧。
 

        CSS Sprites技术不新鲜，早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传，后来出来个14 Rules for Faster-Loading Web Sites, 技术人员之间竞相传阅，其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内很多blog都提到CSS Sprites，最著名的例子莫过于 http://www.google.co.kr/ 下方的那几个动画。最新发布的YUI中，也是使用到CSS Sprites，几乎都有的CSS装饰图都被一个40×2000的图包办。社交大站Facebook最近也使用了一个22×1150的图片承担了所有icon. 一时间，CSS Sprites无处不在。
原理
我们知道，自CSS革命以降，HTML倾向于语义化，在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的，少不了各种漂亮的图来装点。新时代的生产方式是，在HTML布满各种各样的钩子（hook），然后交由CSS来处理。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现（题外话：为何我提现阶段，因为未来浏览器若支持content则又新增另外的实现方法）。我们的主角是，你一定猜到了，就是background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。
 
我们使用YUI的sprite.png举个例子，假如我们有这么一段代码，max代表最大化，min代表最小化，我们需要给它们配上相应的漂亮图片（这样我们的网站才能够吸引人，才可以卖钱，才可以到佛罗里达晒太阳:D）：
 
&#60;div class="max"&#62;最大化&#60;/div&#62;
&#60;div class="min"&#62;最小化&#60;/div&#62;
这两个class都使用同一个图片：
.min, .max {
  width:16px;
  height:16px;
  background-image:url(http://developer.yahoo.com
/yui/build/assets/skins/sam/sprite.png);
  background-repeat: no-repeat; /*我们并不想让它平铺*/
  text-indent:-999em; /*隐藏文本的一种方法*/
}
效果如下：

最大化
最小化

我们看到一团灰，没错，因为我们还没有指定background-position，默认为 0 0，可以看下sprite.png, 处于这个位置正是灰块。好了，我们要找到代表最大化的加号和代表最小化的减号的位置找出来。经过测量，最大化按钮位于Y轴的350px处，最小化按钮位于Y轴400px处。想一想我们如何才能让它们能够显示出来呢，明显，要向上提升sprite.png，得到代码如下：
 
.max {
  background-position: 0 -350px;
}
.min {
 [...]]]></description>
		<wfw:commentRss>http://www.willice.com/2008/10/css-sprites.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Hello world!</title>
		<link>http://www.willice.com/2008/10/hello-world.html</link>
		<comments>http://www.willice.com/2008/10/hello-world.html#comments</comments>
		<pubDate>Thu, 09 Oct 2008 04:02:33 +0000</pubDate>
		<dc:creator>冰水</dc:creator>
				<category><![CDATA[我不分类]]></category>
		<category><![CDATA[HostGator]]></category>
		<category><![CDATA[冰水]]></category>

		<guid isPermaLink="false">http://willice.com/blog/?p=1</guid>
		<description><![CDATA[欢迎使用 WordPress。这是您的第一篇日志。您可以编辑它或是删除它，然后开始写您自己的 blog。

历史性的一刻，今天用上了美国主机HostGator，架上了自己人生的第一个独立博客o(∩_∩)o&#8230;哈哈！
在这里要感谢MTV、CCTV、MATT、群群大美女、酋长、……感谢各位路过的朋友，我爱S你们了~
                                   1e58836f                                            2008-10-09——冰水
]]></description>
		<wfw:commentRss>http://www.willice.com/2008/10/hello-world.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
