|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
网页制造poluoluo文章简介：上面让我们来懂得一下这篇CSSSprites(CSS图象拼合手艺)技能、工具和教程汇合吧。
明天破洛洛将向人人保举今朝为止最全的CSSSprites(CSS图象拼合手艺)技能、工具和教程汇合，该汇合是有一名外洋计划师搜集整合，并由oncoding翻译成中文的，感激他们的辛劳奉献。CSSSprites手艺在外洋并非甚么新手艺，只不外近两年(特别08年入手下手)中国入手下手盛行这个词，人人也入手下手愈来愈存眷CSSSprites这个没有尺度中文翻译的手艺。CSSSprites这个词假如直译的话是”CSS精灵”的意义，它明显没法表达其手艺的内在。一般我们把它叫做CSS图象拼合手艺,固然另有人把CSSSprites叫做”CSS贴图定位”。不管怎样叫，它的手艺中心是稳定的，上面让我们来懂得一下这篇CSSSprites(CSS图象拼合手艺)技能、工具和教程汇合吧。
甚么是CSSSprites？
“Sprite”(精灵)这个词在盘算机图形学中有它共同的界说，因为游戏、视频等画质愈来愈高，必需有一种手艺能够智能的处置材质和贴图，而且要同时坚持画面流利。“Sprite”就是如许一种手艺，它将很多图片组合到一个网格上，然后经由过程程序将每一个网格的内容定位到画面上。
Sprite被定位到一副静态图片上，而且经由过程复杂的程序或硬件便可准确定位到画面上，一幅幅图片就像是被“变”出来的，他们并没有独自占用内存，以是被取名为“Sprite精灵”。
上图是口袋魔鬼的组合图片，能够点这里浏览更多。不是加载每一个但以图片
工夫举行到2000年，Web计划向着精巧、奇妙的偏向开展。计划师们入手下手思索利用非Javascript的方式制造鼠标滑过、悬停菜单的效果，这时候CSSSprite应运而生，它基于同上文提到的游戏Sprite一样的道理，而且利用CSS更简单把持，很快的盛行开来。
2004年，DaveShea提出了一种利用CSS把持组合图片的计划，将许太小的图片组合在一同，利用css界说背景属性，来把持图片的显现地位和体例。
当页面加载时，不是加载每一个独自图片，而是一次加载全部组合图片。这是一个了不得的改善，它年夜年夜削减了HTTP哀求的次数，加重服务器压力，同时延长了悬停加载图片所必要的工夫提早，使效果更流利，不会停留。
CSSSprites用在那里？
CSSSprites能够用在良多场所，年夜型网站能够将很多独自的图片，以无机的体例组合起来，从而使其便于保护和更新。图片之间一般会留出较年夜的空缺，使得图片不会影响网页的内容。但同时CSSSprite年夜多利用于较流动的像素定位中，它的弹性较差，收到定位等要素的制约。以是，你必要在可保护性vs下降负载之间衡量利害，选择最合适你的项目的体例。
上面是一些CSSSprites的利用典范：
Xing
这个网站将一些按钮、图标和LOGO做成了CSSSprites：
Amazon
亚马逊利用的年夜幅、划一奇妙的CSSSprites：
Apple
苹果网站利用CSSSprites来制造导航菜单的鼠标悬停效果：
YouTube
YouTube利用了一个2008像素高的CSSSprites：
CNN
CNN利用了十分复杂审慎的计划：
Digg
Digg的计划对照庞大：
Yahoo
Yahoo将他们大度的图标等间隔排布起来：
Google
Google利用了极为简化的计划：
网页制造poluoluo文章简介：上面让我们来懂得一下这篇CSSSprites(CSS图象拼合手艺)技能、工具和教程汇合吧。
DragonInteractive
一个丰厚多彩的CSSSprites计划：
TV1.rtp.pt
一个很年夜很酷的CSSSprites计划
CSSSprites经常使用来兼并频仍利用的图形元素，如导航、LOGO、支解线、RSS图标、按钮等。一般它们不会作为网页内容呈现，由于触及内容的图片并非每一个页面都一样。
关于CSSSprites的文章
CSSSprites:ImageSlicing’sKissofDeath
中文版:款式表贴图定位（CSSSprites）：图象切片的出生之吻
最威望的CSSSprites先容文章之一
CSSSprites:WhatTheyAre,WhyThey’reCoolAndHowToUseThem
一篇图文并茂的先容文章
HowYahoo.comandAOL.comImproveWebPerformanceWithCSSSprites
先容Yahoo、AOL等网站利用CSSSprites下降服务器压力的案例。
WhatAreCSSSprites?
又一篇先容文章
SpriteOptimization
DaveShea的思索：是否是真的有需要简历庞大的年夜型CSSSprites？谜底是不！不要弄得太庞大，找到一个折衷的计划才是邪道。
CreatingEasyandUsefulCSSSprites
一篇教程，其源文件可下载进修
FastRolloversWithoutPreload
一个疾速翻转效果的例子
CSSSprites+Roundedcorners
另外一个例子：利用CSSSprites完成背景圆角
CSSImageSprites
一篇教程
OptimizeYourWebsiteUsingCSSImageSprites
十分具体的教程，先容了CSSSprites的道理和使用办法。
AnimatedGIFForCSSSprites
一个对照出格的使用
ImageSpriteNavigationWithCSS
如何制造复杂的悬停菜单效果
AdvancedCSSMenu
仍是悬停效果
CreatingandUsingCSSSprites
一个十分基础的教程
网页制造poluoluo文章简介：上面让我们来懂得一下这篇CSSSprites(CSS图象拼合手艺)技能、工具和教程汇合吧。
CSSSprites视频教程
HowtoUseCSSSprites
DavidPerel注释了CSSSprites的基础观点，并演示了怎样在网页中利用它，长度：10分钟
CreatingRoundedButtonsWithCSSSprites
持续下面的教程，展现了怎样制造滑动按钮
ExactlyHowtoUseCSSSprites
AndresFernandez展现了CSSsprites怎样加速加载工夫和削减哀求次数
HowToUseCSSSprites
ChrisCoyier展现了一个CSSsprites的典范，他将8幅图片组合在了一同，而且利用jQuery制造了一个小程序。
FasterPageLoadsWithImageConcatenation
关于庞大的网站，削减图片哀求数目能够加重服务器包袱，这是很多站长所但愿看到的。
CSSImageSpritesIn10Minutes
另外一个关于导航菜单的教程
CSS:UsingPercentagesinBackground-Image
先容背景图片定位的办法
使用CSSSprites制造图象映照(imagemaps)
利用CSSSprites，你能够对一个工具的一小部分加载翻转效果，利用负值的背景图片地位(background-position)，你能够创立基于CSS的图象映照，上面的文章报告了这一手艺：
CSSImageMapsUsingSprites
一个基于CSS的图象映照的复杂例子。你能够同传统的体例对照一下好坏。
CityGuideMapUsingSprites
另外一个横向定位的例子
AdvancedMapUsingSprites
一个更初级的手艺。
网页制造poluoluo文章简介：上面让我们来懂得一下这篇CSSSprites(CSS图象拼合手艺)技能、工具和教程汇合吧。
CSSSprites手艺
CSSSprites2
DaveShea利用jQuery扩大了典范的CSSSprites，他的手艺可让分歧的链接之间利用组合图片，即便用户禁用了Javascript。
CSSSprites2Refactored:BuildinganUnobtrusivejQueryPlug-In
JoelSutherland制造的jQuery插件，收拾了DaveShea的功效，并简化了初始化设置。
BackgroundRepeatandCSSSprites
甚么情形下利用CSSSprites
CSSSprite:PhotoshopScriptCombinesTwoImagesforCSSHover
这是一个能够导进Photoshop的举措设置，可让你疾速制造翻转按钮的背景图片。
ExtendingCSSSpriting
JenniferSemtner扩大了典范CSSSprites手艺，并报告应当在甚么时分利用它。
SlidingDoorsMeetsCSSSprites
滑动门手艺“SlidingDoorsofCSS.”
HowtoPreloadImagesWhenYouCan’tUseCSSSprites
怎样处置CSSSprites对网页内容的影响
JavaScriptSpriteAnimationUsingjQuery
AlexWalker分离CSSSprites和jQuery，完成了“翻开页面”的效果
IE6,CSSSpritesandAlphaTransparency
JulienLecomte报告IE6下的通明hack成绩
网页制造poluoluo文章简介：上面让我们来懂得一下这篇CSSSprites(CSS图象拼合手艺)技能、工具和教程汇合吧。
CSSSprite制造工具
DataURISprites
DURIS(DataURI[CSS]Sprites)是一个办理网页图片的新工具，它能够最年夜限制的匡助你削减背景图片的数目，削减哀求数。
Spritr
一个天生CSSSprites的复杂工具
SpriteCreator1.0
同上
CSSSpriteGenerator
制造CSSsprites的Drupal插件
CSSSpritesGenerator
这个工具同意你上传多张图片天生CSSSprites和CSS代码
ProjektFondueCSSSpriteGenerator
它具有疏忽反复图象，调剂图象精度，断定横向和纵向偏移，指定背景致和通明度，指定CSS前缀等浩瀚功效。
SmartSprites
基于java的桌面程序
你能够持续以你本人的体例编写CSS和利用图象，有一个工具能够主动为你设置CSSSprites，这里是PHP版本，它是开源的，详细能够看：ChrisBrainard’sSpriteCreator1.0.
附：CSS属性background-position(图象背景地位)该怎样设置
background-position(图象背景地位)这个属性是CSS中十分主要的属性。
依据CSS标准，background-position属性包括了两个(可选的)变量：程度地位(horizontal)和垂直地位(vertical)，比方：
1..introduction{
2.background-image:url(bg.gif);
3.background-position:[horizontalposition][verticalposition];
4.}
.introduction{background-image:url(bg.gif);background-position:[horizontalposition][verticalposition];}
利用这个属性，你能够界说块级元素的背景图象地位，可使用%百分比或px像素为单元来界说图象入手下手的地位，也能够利用关头字：topleft,topcenter,topright,centerleft,centercenter,centerright,bottomleft,bottomcenter,bottomright.
在“background-position:x%y%;”如许一个语句中，x%指程度偏移，y%指垂直偏移，左上角是：0%,0%，右下角是：100%,100%，默许的是50%。
比方，你能够如许界说：
1.ulli{
2.background-image:url(bg.gif);
3.background-position:19px85px;
4.},
如许背景图片就被定位到了间隔左边19像素，间隔上边85像素。
关于这个属性，能够在这里找到更具体的材料：background-position(CSSproperty)。
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:56:35
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜