荣耀彩票代理

IT技术互动交流平台

如何运用CSS Sprite雪碧图详细教程

作者:whl  发布日期:2018-11-07 08:50:00

  ZAIGUONEICSS SpriteYINWEITADETEBIEZHICHUBEIHENDUORENCHENGWEIJINGLING,TANENGHENHAODEDUIWANGYETUPIANJINXINGCHULI。CSS SpriteKEYIBANIZAIDANGQIANYEMIANZHONGXUYAODESUOYOUTUPIANDOUZHENGHEDAOYIZHANGDATUZHONG,HUOZHEJIANGNIXUYAODETUBIAOHEBEIJINGHEBINGDAOYIQI,RANGNISHIYONGQILAIGENGJIAFANGBIAN。XIAWENJIANGZHUYAODUICSS SpriteXUEBITUDESHIYONGJINXINGXIANGXIJIESHAO,GANXINGQUDEHUADAJIAKEYIYIQILAIKANKAN。

  XUEBITUDESHIYONGCHANGJING

  JINGTAITUPIAN,BUSUIYONGHUXINXIDEBIANHUAERBIANHUA。

  XIAOTUPIAN,RONGLIANGBIJIAOXIAO(2~3k)。

荣耀彩票代理  TUPIANJIAZAILIANGBIJIAODA。

  MUDE

  JIANSHAOHttpQINGQIUSHULIANG,JIASUNEIRONGXIANSHI。YINWEIMEIQINGQIUYICI,JIUHUIHEFUWUQIJIANLIYICILIANJIE,ERJIANLILIANJIESHIXUYAOEWAIDESHIJIANDE。

  SHIYONG

  SHIYONGXUEBITUZHIQIAN,WOMENXUYAOZHIDAOXUEBITUZHONGGEGETUBIAODEWEIZHI。

各个图标位置

  CONGSHANGMIANDETUPIANBUNANKANCHUXUEBITUZHONGGEGEXIAOTUBIAO(icon)ZAIZHENGZHANGXUEBITUDEQISHIWEIZHI,LIRUDIYIGETUBIAO(QUNZI)ZAIXUEBITUDEQISHIWEIZHIWEI x:0,y:0,DIERGETUBIAO(XIEZI)ZAIXUEBITUDEQISHIWEIZHIWEI x:0,y:50px,DISANGETUBIAO(ZUQIU)ZAIXUEBITUDEQISHIWEIZHIWEIx:0,y:100px,YICILEITUIKEYIDECHUGEGETUPIANXIANGDUIYUXUEBITUDEQISHIWEIZHI。

  YISHANGMIANDEXUEBITUWEILI(SHIJIXUEBITUZHONGGEGEXIAOTUPIANDEQISHIWEIZHIHESHANGMIANDEZHANSHITUBUTONG)YONGYIGEDemoLAICHANSHUTADESHIYONGFANGFA。

HTML内容
CSS内容

荣耀彩票代理  WEISHENMESHIYONGXUEBITUSHIbackground-positionSHUXINGZHIJUNWEIFUSHU。

  SHANGMIANDELIZIYIJINGCHANSHULERUHESHIYONGXUEBITU,ZHIBUGUOCHUXUEZHEKENENGHUIDUIXUEBITUZHONGDEbackground-positionSHUXINGZHIWEIFUZHIYOUSUOYIHUO。ZHEIGEWENTIQISHIBUNANHUIDA,RUGUOXIXINDERENYINGGAIHENZAOJIUFAXIANLESHIYONGFUSHUDEGENYUANSUOZAI。ZHEIBIANYONGSHANGMIANDEDemoWEILI,LAIFENXIZHEIGEWENTI。SHANGMIANDEspanBIAOQIANSHIYIGE24*30pxZHANGKUANDERONGQI,ZAISHIYONGBEIJINGTUSHI,BEIJINGTUDECHUSHIWEIZHIHUICONGRONGQIDEZUOSHANGJIAODEKAISHIPUMANZHENGGERONGQI,RANERRONGQIDEDAXIAOXIANZHILEBEIJINGTUCHENGXIANDEDAXIAO,CHAOCHURONGQIBUFENBEIYINZANGQILAI。JIARUSHEZHIbackground-position: 0 0 NEIMEYIWEIZHE,BEIJINGTUXIANGDUIYURONGQI(spanBIAOQIAN)xZHOU=0;yZHOU=0DEWEIZHIZUOWEIBEIJINGTUDEQISHIWEIZHILAIXIANSHITUPIAN。SUOYIRUGUOXUYAOZAIRONGQIZHONGXIANSHIDIERGETUBIAO,YIWEIZHEXUEBITUxZHOUFANGXIANGYAOZUOYIDONG,ZUOYIDONGXUEBITUJITADEZHIHUISHEZHIWEIFUSHU,TONGLIyZHOUFANGXIANGYEYIYANG。

y轴方向也一样

  ZHIZUO

  PSSHOUDONGPINTU

  SHIYONGSpriteGONGJUZIDONGSHENGCHENG(CssGagaHUOZHECssSprite.exe)

  CssSprite XUEBITUGONGJU,YIZAIgithubSHANGKAIYUAN,DIZHI:http://github.com/iwangx/sprite

  XUEBITUDEYOUQUEDIAN

  YOUDIAN:

  1.JIAKUAIWANGYEJIAZAISUDU

荣耀彩票代理  WANGYESHANGMIANMEIYIZHANGTUPIAN,DOUYAOXIANGLIULANQIQINGQIUXIAZAITUPIAN,ERLIULANQIJIESHOUDETONGSHIQINGQIUSHUSHI10GE,YICINENGCHULIDEQINGQIUSHUMUSHILIANGGE。

  2.HOUQIWEIHUJIANDAN

  GAIGONGJUKEYIZHIJIETONGGUOXUANZETUPIANJINXINGTUPIANDEPINJIE,DANGRANNIYEKEYIZIJINUODONGLIMIANDETUPIAN,ZIJIQUBUJUNIDEXUEBITU,GENGHUANTUPIANDESHIHOUYEZHIYAOGENGGAIYIXIATUPIANDEWEIZHIJIUKEYILE。ZHIJIESHENGCHENGDAIMA,JIANDANYIYONG。

荣耀彩票代理  3、CSS SpritesNENGJIANSHAOTUPIANDEZIJIE,CENGJINGBIJIAOGUODUOCI3ZHANGTUPIANHEBINGCHENG1ZHANGTUPIANDEZIJIEZONGSHIXIAOYUZHEI3ZHANGTUPIANDEZIJIEZONGHE。

  4、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

  5、GENGHUANFENGGEFANGBIAN,ZHIXUYAOZAIYIZHANGHUOSHAOZHANGTUPIANSHANGXIUGAITUPIANDEYANSEHUOYANGSHI,ZHENGGEWANGYEDEFENGGEJIUKEYIGAIBIAN。WEIHUQILAIGENGJIAFANGBIAN。

  QUEDIAN:

  ZAITUPIANHEBINGDESHIHOU,NIYAOBADUOZHANGTUPIANYOUXUDEHELIDEHEBINGCHENGYIZHANGTUPIAN,HAIYAOLIUHAOZUGOUDEKONGJIAN,FANGZHIBANKUAINEICHUXIANBUBIYAODEBEIJING;ZHEIXIEHAIHAO,ZUITONGKUDESHIZAIKUANPING,GAOFENBIANLVDEPINGMUXIADEZISHIYINGYEMIAN,NIDETUPIANRUGUOBUGOUKUAN,HENRONGYICHUXIANBEIJINGDUANLIE;

  ZHIYUKEWEIHUXING,ZHEISHIYIBANSHUANGRENJIAN。KENENGYOURENXIHUAN,YOURENBUXIHUAN,YINWEIMEICIDETUPIANGAIDONGDOUDEWANGZHEIGETUPIANSHANCHUHUOTIANJIANEIRONG,XIANDESHAOWEIFANSUO。ERQIESUANTUPIANDEWEIZHI(YOUQISHIZHEIZHONGSHANGQIANpxDETU)YESHIYIJIANPOWEIBUSHUANGDESHIQING。DANGRAN,ZAIXINGNENGDEKOUHAOXIA,ZHEIXIEDOUSHIKEYIKEFUDE。

  YOUYUTUPIANDEWEIZHIXUYAOGUDINGWEIMOUGEJUEDUISHUZHI,ZHEIJIUSHIQULEZHURUcenterZHILEIDELINGHUOXING。

  CSS SpritesYIBANZHINENGSHIYONGDAOGUDINGDAXIAODEHEZI(box)LI,ZHEIYANGCAINENGGOUZHEDANGZHUBUYINGGAIKANDAODEBUFEN。ZHEIJIUSHISHUO,ZAIYIXIEXUYAOFEIDANXIANGDEPINGPUBEIJINGHEXUYAOWANGYESUOFANGDEQINGKUANGXIA,CSS SpritesBINGBUHESHI。

  CHANSHU

荣耀彩票代理  JINGGUOSHANGMIANDETUWENJIANGJIE,XIANGXINDAJIADUIYUXUEBITUYIJINGYOULECHUBUDELEJIEBA?ZHIQIANBUFENCHUXUEZHEHEXIAOBIANFANYINGDEXUEBITUZHONGDEbackground-positionSHUXINGZHIXIANSHIDESHIFUZHIDEWENTISHANGWENYEJINXINGLEHUIDA。XUEBITUDEYOUQUEDIANYEJIANDANMINGLE,DAJIAKEYIGENJUZIJIDEXUQIULAISHIYONG。

Tag标签:      
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规