css sprite 技术学习

2020-05-08 09:57:49易采站长站整理

Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/

综合案例

Google Korea(1和2技巧)
http://demo.rexsong.com/200705/google_korea/

CSS Menus(2和3技巧)
http://demo.rexsong.com/200705/css_background_menus/

四,CSS Sprites的问题

由于IE6存在的background的flicker问题IE6/Win, background image on <a>, cache=‘check every visit’: flicker!,有人针对此问题提出了解决方案Fast Rollovers Without Preload

关于IE6的flicker问题,fivesevensix.com上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6

另外:brunildo.org的CSS tests and experiments是关于css各种功能不错的参考手册和测试工具。

五,相关资源

What Are CSS Sprites?

http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=1

CSS Sprites: Image Slicing’s Kiss of Death

http://www.alistapart.com/articles/sprites/

CSS Sprites Generator

http://www.csssprites.com/

http://spritegen.website-performance.org/

Fast Rollovers Without Preload

http://wellstyled.com/css-nopreload-rollovers.html

JavaScript Sprite Animation Using jQuery

http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/

How to create CSS sprites

http://fatagnus.com/how-to-create-css-sprites/

Creating Rollover Effects with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/

Building a Dynamic Banner with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/

CSS Sprites and IE/Win Flicker Issue

CSS Sprites and IE/Win Flicker Issue

css用法测试工具:CSS tests and experiments

http://www.brunildo.org/test/index.html