设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 9907|回复: 3

【整理:HTML/CSS】background-position的妙用

[复制链接]
发表于 2004-6-17 02:46:27 | 显示全部楼层 |阅读模式
作者:zdzhuo 整理日期:2004年6月17日

css2.0 中的 background-position 大家用到过吗
怎么用的 用在哪里
js控制图片切换有两个缺陷
1.有时后切换缓慢,需要预载解决
2.要制作2-3套图片
看看怎么用 background-position 解决这个问题
实现快速"切换"
这里只用到一张图片

至于代码中的font:10px/1也是不常见的用法
可以参考这里
http://www.w3.org/Style/CSS/Test/CSS1/current/sec5526c.htm
把思维拓宽一下 用在网站地图上呢

  1. <style type="text/css">
  2. #menu a {
  3. display:block;
  4. width:150px;
  5. margin:6px;
  6. padding:10px 0 10px 32px;
  7. font:10px/1 sans-serif;
  8. color:#f90;
  9. background: url("http://nb001722.sosoo.net/btn.gif") top left no-repeat;
  10. text-decoration: none;
  11. }
  12. #menu a:hover {
  13. background-position: 0 -39px;
  14. color:red;
  15. }
  16. #menu a:active {
  17. background: url("http://nb001722.sosoo.net/btn.gif") 0 -78px no-repeat;
  18. color:black;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div id="menu">
  24. <a href="###">Menu link 1</a>
  25. <a href="###">Menu link 2</a>
  26. <a href="###">Menu link 3</a>
  27. <a href="###">Menu link 4</a>
  28. <a href="###">Menu link 5</a>
  29. </div>
复制代码
发表于 2006-4-21 18:01:12 | 显示全部楼层
看不到什么效果。哎。
发表于 2009-9-29 09:05:54 | 显示全部楼层
4年以前的帖子啦,被别的网站转载了,然后找到这里,没有那个关键性的图片啊
发表于 2012-3-22 16:52:07 | 显示全部楼层
这个就是css sprite啦
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2017-11-23 19:04 , Processed in 0.092693 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表