<?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>Moondy’s Zone &#187; css sprites</title>
	<atom:link href="http://www.moondyzone.com/tag/css-sprites/feed" rel="self" type="application/rss+xml" />
	<link>http://www.moondyzone.com</link>
	<description>一位IT民工的点点滴滴……  WEB前端、网页重构、AS3</description>
	<lastBuildDate>Mon, 18 Apr 2011 10:06:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type='text/javascript' src='http://www.moondyzone.com/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
	<item>
		<title>也谈一谈css sprites技术</title>
		<link>http://www.moondyzone.com/css/240.html</link>
		<comments>http://www.moondyzone.com/css/240.html#comments</comments>
		<pubDate>Sun, 05 Apr 2009 08:54:32 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[css sprites]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=240</guid>
		<description><![CDATA[其实说起来，css sprites算不上一门什么高深的技术，应该只能算是一种技巧吧。也就是通过背景图的定位（background-position ）把页面中所用到的图标、背景图之类的整合到一张整的背景图里，从而大大减少了页面请求数，提高了页面浏览的性能。
 其实本民工最初这样用的时候并不知这就叫css sprites，只是看到各大主流站都是这么做于是也效仿而已。比如下面这张图，是腾讯主站背景图的一部分：

定位的样式其实只用一句：

1
background: url&#40;&#34;your_url.gif&#34;&#41; x y no-repeat;

关于CSS中的坐标，图片的最左上角为（0,0）,而定位图片内部的位标的话，x、y都是负值。还有，可以把需要repeat的跟no-repeat的图分开，如果放在一起的话那么就需要考虑一下图片的延展性就可以了。
 实现css sprites并不难，只要有点耐心与细心就可以了。在制图的时候建议用Fireworks，他可以把图片精确定位到某个坐标，这是PS做不到的。采用css sprites对页面性能的提升是毋庸置疑的，只是在后期的修改与维护上麻烦了点而已，具体怎么用，可以跟据项目的具体情况来决定了。比如说，本民工的博客就没这样用，因为跟本就没用到几张图片，嘿嘿。
相关文章CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签一道看似简单的面试题]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/240.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

