CSS Sprite：@image-map

图像映射是某些基本位图图像的命名区域（片段）的目录。

 @image-map 规则

Image Map 是使用 @image-map declare 声明的：

@image-map toolbar-icons 
{
 /* we define three images under this single logical entity */
 src: url(tb-icons.png) 120dpi, /* <= 120dpi */
 url(tb-icons-x2.png) 240dpi, /* <= 240dpi */
 url(tb-icons-jumbo.png); /* the rest  */

 cells: 15 2; /* 15 columns, 2 rows in the image */

 /* logical names of the parts */ 
 items: bold, italic, underline, strike,
         font-family, font-size, text-color, text-back-color;
}

这声明了与基础映像的单元格或片段关联的一组名称。 注意

图像映射支持不同分辨率的一组源

 image-map（） 函数

图像映射的片段可通过 image-map（） 函数寻址：

image-map(map-name,part-name)

这将地图的零件名称作为图像片段。

图像映射的片段可用于任何 CSS 属性，该属性需要 和 image：

toolbar > button {
 size:2em;
 background:no-repeat 50% 50%; padding:3px;
}
/* use of image-map fragments */
toolbar > button.bold { background-image:image-map(toolbar-icons,bold); } 
toolbar > button.italic { background-image:image-map(toolbar-icons,italic); } 
toolbar > button.underline { background-image:image-map(toolbar-icons,underline); } 
toolbar > button.strike { background-image:image-map(toolbar-icons,strike); }