Css Sprites,就是将页面中所有css装饰图合并成一个较大的图,然后用到特定的css装饰图的时候就利用css的background-image:大图,background-position:小图在大图中的x位置,小图在大图中的y位置
优点:利用Css Sprites可以提升网站的性能,普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
按照yahoo的 rules for high performance web sites的原则,应当较少Client与Server端间的HTTP Request次数。
通过CSS Sprites方法将多张图片组装成单独的一张图片,可以有效减少HTTP请求的次数。
鼠标没有一上去时的关键代码。
<td style="margin: 0pt; padding: 0pt 0.35em 0pt 0.4em; text-align: center; cursor: pointer;">
<a target="_blank" href="/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" style="color: rgb(68, 68, 68); text-decoration: none;">
<div>
<div style="margin: 0.5em auto; background: transparent url(/intl/zh-CN/images/toolbar_animation_20070919.png) no-repeat scroll 0pt 0px; width: 52px; height: 37px; cursor: pointer; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"/>
<span style="white-space: nowrap;">
<font size="-1">视频</font>
</span>
</div>
</a>
</td>
<td style="margin: 0pt; padding: 0pt 0.35em 0pt 0.4em; text-align: center; cursor: pointer;">
<a target="_blank" href="/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" style="color: rgb(84, 167, 13); text-decoration: underline;">
<div><div style="margin: 0.5em auto; background: transparent url(/intl/zh-CN/images/toolbar_animation_20070919.png) no-repeat scroll -208px 5px; width: 52px; height: 37px; cursor: pointer; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"/><span style="white-space: nowrap;"><font size="-1">视频</font></span></div></a></td>
这里是直接用的background属性没有分开background-position
语法:
background : background-color || background-image || background-repeat || background-attachment || background-position
取值:
该属性是复合属性。请参阅各参数对应的属性。
默认值为:transparent none repeat scroll 0% 0%。