图片做背景切换时闪烁

解决思路：雪碧图

图片做背景，在切换时会重新加载图片，所以第一次会出现闪烁的情况，后面在切换时，由于图片已经加载，所以不会出现闪烁。

解决办法：将这两张图拼成一张图(雪碧图)，通过定位来实现图片的切换。

雪碧图叫Sprites，雪碧叫Sprite

使用矢量图标

目前在计算机上主要有两种形式来表现图形，一种是栅格图形，另一种是矢量图形。

svg 图标的使用

Html 5 支持直接嵌入 svg 标签

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

svg 做背景

 background: url(DEMO1.svg) no-repeat;

通过 img 标签使用：

<img src="DEMO1.svg" width="140" height="170" alt="">