CSS Sprites浅析

最新推荐文章于 2024-09-26 17:08:53 发布

weixin_34259232

最新推荐文章于 2024-09-26 17:08:53 发布

阅读量60

点赞数

文章标签： javascript python photoshop ViewUI

原文链接：https://my.oschina.net/u/2255071/blog/373234

版权

2019独角兽企业重金招聘Python工程师标准>>>

CSS Sprites 将多张图片合并为一张背景图片，有效较少了HTTP请求数，有助于提高页面图片的加载速度，提升用户体验。其基本实现步骤如下：

1、用PhotoShop等图像处理工具将多行小图合并为一张大图；

2、用这张大图作为背景图像，替代原先所有的小图；

3、精确设置background-position属性，将HTML元素放置到合适的位置上。

注意：CSS Sprites只适用于支持背景图片的HTML元素！

实例：http://www.stevesouders.com/examples/sprites.php?t=1422517058506

<style>
#navbar span {
  width:31px;
  height:31px;
  display:inline;
  float:left;
  background-image:url(/images/spritebg.gif?t=1422517057);
}
.home     { background-position:0 0; margin-right:4px; margin-left: 4px;}
.gifts    { background-position:-32px 0; margin-right:4px;}
.cart     { background-position:-64px 0; margin-right:4px;}
.settings { background-position:-96px 0; margin-right:4px;}
.help     { background-position:-128px 0; margin-right:0px;}
</style>

<div id="navbar" style="background-color: #F4F5EB; border: 2px ridge #333; width: 180px; height: 32px; padding: 4px 0 4px 0;">
  <a href="javascript:alert('Home')" title="Home"><span class="home"></span></a>
  <a href="javascript:alert('Gifts')" title="Gifts"><span class="gifts"></span></a>
  <a href="javascript:alert('Cart')" title="Cart"><span class="cart"></span></a>
  <a href="javascript:alert('Settings')" title="Settings"><span class="settings"></span></a>
  <a href="javascript:alert('Help')" title="Help"><span class="help"></span></a>
</div>

分析：原先每一个链接都是一个小图片，现在将这些小图标合并为一张大图；然后利用HTML中支持背景图片的元素<span>，间接地为<a>元素添加背景图片。要点有二：一是每一个<span>都需设置背景图片，且是同一张图片；二是每个<span>的backgroud-position需要单独设置，从而将图标和相应的链接对齐。

转载于:https://my.oschina.net/u/2255071/blog/373234