手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:背景色

CSS背景

不多说啥了。在网上看到这篇文章,难得是有详细介绍的。。虽然这个功能我很多时候其实已经在用了,但。那都是直接拿来用的,并没有深刻的研究过。今天这里终于看到一个有注释的,就贴上来看看。

这种用法,是被YAHOO所推荐的。因为。这样的用法,降低了图片的下载量。而且并在一起,并不会给图片的大小增加很多。

原文:http://iruif.cn/swd/?p=25
这里只贴重要的内容。请原作者不要伤心。谢谢


图片文件为:

大小: 6.41 K
尺寸: 14 x 166
浏览: 1819 次
点击打开新窗口浏览全图

首先我们得控制好要应用小图标的对象的高度. 否则到时候这个图标就会显示异常了.

比如说我们要给 li 标签使用这个小东东, 那么我们就得写上这样的代码:

CSS代码
  1. li {   
  2. height12px/* 这个高度等于每个小图标的高度 */   
  3. line-height12px/* 这个同上. 但只是有些时候需要写这个而已. */   
  4. backgroundurl('icons.gif') 0 -12px/* 这里的 -12px 就是定义你要使用第几个图标. 如果每个图标的高度都是 12px 的话, 那么我要使用第 N 个图标的话就得写 n*12 . */   
  5. padding-top: 0; /* 这个要严格限定为 0 . 否则呢, 哼哼哈莉.. */   
  6. padding-bottom: 0; /* 这个也一样.. */   
  7. padding-left14px/* 这个肯定是要设定一个值的.. 否则小图标就会被文字覆盖掉.. padding-right 可以设定也可以不设定.. */   
  8. margin2px 0; /* 如果要设定每个 li 标签之间的距离话, 就要改这个了.. */   
  9. overflowhidden/* 在有些情况下需要写这个. 具体作用我就不多解释了. */   
  10. }  
显然, 把小图标都放到一个文件里的话会带来很多的问题. 比如要限定宽度和高度 [也就是内容会显示不完整] , 并且 padding 也将无法使用 [也就是会影响到 border 等属性的效果] .
当然也有解决办法. 那就是 — 把每个小图标的距离拉开, 或者干脆把他们都拆成单独的文件..


如果不明白可以问问原作者。。。

 

Tags: css, 背景色, position