CSS将含有多个图标的图片应用于背景

资源收藏admin2008年11月20日1,207 点击数

在尖锐之风上看到一个很实用的CSS效果，就是将含有多个图标的图片做成背景，一次只能显示一张：例如下列图片：

点击查看图片

首先我们得控制好要应用小图标的对象的高度，否则到时候这个图标就会显示异常了。
比如说我们要给 li 标签使用这个小东东, 那么我们就得写上这样的代码：

li {
height: 12px; /* 这个高度等于每个小图标的高度 */
line-height: 12px; /* 这个同上. 但只是有些时候需要写这个而已. */
background: url('icons.gif') 0 -12px; /* 这里的 -12px 就是定义你要使用第几个图标. 如果每个图标的高度都是 12px 的话, 那么我要使用第 N 个图标的话就得写 n*12 . */
padding-top: 0; /* 这个要严格限定为 0 . 否则呢, 哼哼哈莉.. */
padding-bottom: 0; /* 这个也一样.. */
padding-left: 14px; /* 这个肯定是要设定一个值的.. 否则小图标就会被文字覆盖掉.. padding-right 可以设定也可以不设定.. */
margin: 2px 0; /* 如果要设定每个 li 标签之间的距离话, 就要改这个了.. */
overflow: hidden; /* 在有些情况下需要写这个. 具体作用我就不多解释了. */
}

显然, 把小图标都放到一个文件里的话会带来很多的问题. 比如要限定宽度和高度 [也就是内容会显示不完整] , 并且 padding 也将无法使用 [也就是会影响到 border 等属性的效果] .
当然也有解决办法. 那就是 — 把每个小图标的距离拉开, 或者干脆把他们都拆成单独的文件..

标签: , , , , , , .


这篇文章现有3 条评论

» You can leave a response or Trackback .

  1. 2009-06-02 15:27 匿名 Says:

    很好

  2. 2008-12-04 23:39 牧狼羊 Says:

    其实….我还是没有搞懂这是个啥效果…

  3. 2008-12-02 19:57 -.-坏人 Says:

    呵呵,评论显示异常,那我跑过来评论一条好咯

» Trackbacks/Pingbacks

发表评论