手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆

CSS背景

首页 > Javascript >

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

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

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


图片文件为:

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

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

比如说我们要给 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

« 上一篇 | 下一篇 »

只显示10条记录相关文章

imageworkshop中的position的说明及代码 (浏览: 17101, 评论: 1)
Rel与CSS的联合使用 (浏览: 15787, 评论: 2)
9 个基于JavaScript 和 CSS 的 Web 图表框架 (浏览: 15194, 评论: 0)
Table2CSS Converter (浏览: 14336, 评论: 3)
CSS中media标签的作用 (浏览: 14244, 评论: 0)
好东西,不得不贴,继续上传两个文件 (浏览: 14197, 评论: 0)
CSS让你的IE浏览器崩溃 (浏览: 12326, 评论: 0)
CSS Position Fixed for IE6 (浏览: 12312, 评论: 0)
CSS透明属性详解 (浏览: 11514, 评论: 0)
写HTML和CSS的新方法 (浏览: 10148, 评论: 1)

发表评论

评论内容 (必填):