css sprite 技术性学习培训

日期:2020-10-25 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

做为1个前段开发设计人员,還是必须了解1下的哈。

强烈推荐两个线上小专用工具:

  1.CSS SPRITES GENERATOR

  2.CSS 照片拼合转化成器

1,有关CSS Sprite
CSS Sprites是1种网页页面照片运用解决方法。它容许你将1个网页页面涉及到到的全部零星照片都包括到1张大图中去,这样1来,当浏览该网页页面时,加载的照片就不容易像之前那样1幅1幅地渐渐地显示信息出来了。针对当今互联网时兴的速率而言,不高于200KB的单张照片的所需加载時间基础是类似的,因此不用 顾虑这个难题。
依照yahoo的rules for high performance web sites的标准,理应较少Client与Server端间 的HTTP Request次数。根据CSS Sprites方式将多张照片拼装成独立的1张照片,能够合理降低HTTP恳求 的次数。
当整幅照片加载进行后,你便可以应用CSS方式根据设定情况部位的方法进行所需照片的精确启用。

加快的重要,并不是减少净重,而是降低个数。传统式切图注重细致,照片规格型号越小越好,净重越小越好,实际上规格型号尺寸没有谓,测算机统1都按byte测算。顾客端每显示信息1张照片都会向服务器推送恳求,因此,照片越多恳求次数越多,导致延迟时间的将会性也就越大。

2,CSS Sprite的应用

有几篇有关CSS Sprites的文章内容,基础上把其基本原理和体制表明得很清晰。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中有关CSS Sprites的內容3.2. CSS Sprites

3,CSS Sprite的事例

[原文:http://blog.rexsong.com/?p=746#comments]

1. 照片限定(Image Slicing)

典型如文字编写器,小标志非常多,开启时1张张跑出来,给客户的觉得很不太好。假如能用1张图处理,则不容易有这个难题,例如百度搜索室内空间、163blog、Gmail全是这么做的。

Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites

2. 单图转滚(Single-image Rollovers)

开启切换照片的要求,传统式计划方案得再次恳求新照片,由于互联网难题常常导致滞留或等候。假如能把多种多样情况合拼成1张图,就可以完善处理,随后再应用情况图技术性仿真模拟动态性实际效果。

ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/

3. 增加情况(Extend Background Image)

假如照片的某边能够情况平铺无尽增加,则不必须每一个角、每条边独立搞出来,照片能少1个就少1个。实际上,这个基础理论还能够拓展到4角器皿里,益处是能大大简化HTML Structure。

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/

4,CSS Sprites的难题

因为IE6存在的background的flicker难题IE6/Win, background image on <a>, cache=‘check every visit’: flicker!,有人对于此难题提出掌握决计划方案Fast Rollovers Without Preload

有关IE6的flicker难题,fivesevensix.com上有1篇很非常好的科学研究文章内容Minimize Flickering CSS Background Images in IE6

此外:brunildo.orgCSS tests and experiments是有关css各种各样作用非常好的参照手册和检测专用工具。

5,有关資源

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

http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/

css用法检测专用工具:CSS tests and experiments

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