京濤老師

京濤老師

高級網絡整合營銷講師-京濤老師博客

京濤老師

京濤老師分享 CSS Sprites

京濤老師 - admin - - View: 682 次

CSS?Sprites本質上是把多張圖片資源合并到一張圖片上,減少資源請求所帶來時間上的等待,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,background-position可以用數字能精確的定位出背景圖片的位置。 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編輯本段五、 CSS?Sprite的例子  .bg_sprite{background-image:url(/整圖地址);?background- repeat:no-repeat} 引用該類?..?然后在元素中逐一定義背景坐標?..?以下為關鍵屬性?.. #ico1?{width:容器大小;height:容器高度;background-position:X坐標?Y坐標} #ico2?{width:容器大小;height:容器高度;background-position:X坐標?Y坐標} #ico3?{width:容器大小;height:容器高度;background-position:X坐標?Y坐標} .nav?{width:容器大小;height:容器高度;background-position:X坐標?Y坐標} 必須要限定容器大小符合背景圖元素位置?..?另外?..?XY軸是相對于整張圖片的左上角來算的?..?所以取值一定要算清楚編輯本段六、CSS?Sprites的問題  由于IE6 存在的background的flicker問題IE6/Win,?background?image?on?,?cache=‘check?every visit’:?flicker!,有人針對此問題提出了解決方案Fast?Rollovers?Without?Preload 關于IE6的flicker問題,fivesevensix上有一篇很不錯的研究文章Minimize?Flickering?CSS?Background?Images?in?IE6 另外:brunildo的CSS?tests?and?experiments是關于css各種功能不錯的參考手冊和測試工具。京濤老師給大家分享一款css sprites 工具,下載網址: http://www.ggzlye.tw/wenjian-add/CssSprites.rar

0
ok广东快乐十分走势图