17Õ¾³¤Íø

Css Sprite½Ì³Ì

ΪʲôҪʹÓÃCss Sprite£¿

ΪʲôҪʹÓÃCss Sprite£¿

1. Css SpriteµÄÆðÒò

ͼ±êÔ­À´ÊÇÔõÑùµÄ¾ÍÈÃËüÔõÑùºÃÀ²£¿ÎªÊ²Ã´Òª¶à´ËÒ»¾Ù°ÑËüÃǼ¯ºÏµ½Ò»ÕÅͼÀïÈ¥ÄØ£¿

Æäʵ£¬ÕâºÍÍøÒ³µÄ¼ÓÔØÇëÇóÓйأ¬Ò»°ãÀ´ËµÒ»¸öÍøÕ¾Àï²¢²»½ö½öÖ»ÓÐÒ»Á½¸öСͼ±ê£¬¼ÙÈçij¸öÍøÕ¾µÄÊ×Ò³Ò»¹²ÓÐÊ®¸öСͼ±ê£¬ÄÇô¼ÓÔØÕâ¸öÍøÒ³µÄʱºòÄãµÄµçÄԾͻᷢËÍÊ®¸öÇëÇó¡£

ÿ¸öÇëÇó»ØÀ´µÄÏìÓ¦¾ÍÊÇÒ»ÕÅСͼ±êͼƬ¡£µ«ÊÇÈç¹û°ÑÕâЩСͼ±ê¶¼·ÅÔÚÒ»ÕÅ´óͼÀÄÇô¾ÍÖ»Ðè·¢ËÍÒ»¸öÇëÇó¡£

¿´µ½ÕâÀïÄã»á²»»áÓÐһЩÒÉ»ó£ºËäȻʮ¸öÇëÇó±ä³ÉÁËÒ»¸öÇëÇ󣬵«ÊÇͼƬ´óСҲ±ä³ÉÁËÊ®±¶£¬ÕâÑùµÄ»°»¹ÊÇûÓÐʵÖÊÐԵĸı䰡¡£

Æäʵä¯ÀÀÆ÷ͬһʱ¼ä¼ÓÔصÄ×ÊÔ´ÊýÊÇÓÐÏ޵ģ¬Èç¹ûÒ»´ÎÐÔ¼ÓÔØÊ®¸öͼ±ê£¬ä¯ÀÀÆ÷¾Í²»»áÔÚͬһʱ¼ä¼ÌÐø¼ÓÔرðµÄ×ÊÔ´ÁË£¬¼õÉÙÁËÒ³ÃæµÄÇëÇó´ÎÊý£¬Ò²×ÔÈ»¾ÍÌá¸ßÁËÒ³ÃæµÄ¼ÓÔØËٶȡ£

2. ¾Ù¸öÀý×Ó

¾Ù¸öÉú»îÖеݸÀýÀ´·½±ã´ó¼ÒÀí½â£º

Èç¹û±ùÏäÀïÓÐÄãÏë³ÔµÄÊ®¸öÀ¶Ý®£¬ÄãÊÇ»áÿ´ÎÄùýÀ´Ò»¸öÈ»ºóÅÜÊ®´ÎÄØ£¿»¹ÊÇ»áÒ»´ÎÐÔ°ÑÊ®¸öÀ¶Ý®¶¼ÄùýÀ´ÄØ£¿

ËäȻ˵һ´ÎÐÔÄÃÊ®¸ö¿´ËÆÄõĶ«Î÷±ä¶àÁË£¬µ«ÒòΪÀ¶Ý®ÕâÖÖ¶«Î÷±¾À´¾ÍÓÖÇáÓÖС£¬ËùÒÔÒ»´ÎÄÃÊ®¸ö±ÈÒ»´ÎÄÃÒ»¸öÅÜÊ®ÌË»®Ëã¶àÁË¡£

¶øÇÒÎÒÃǴ󲿷ÖÈËÓÃÊÖ»úµÄʱ¼ä¶¼³¬¹ýÁËÓõçÄÔµÄʱ¼ä£¬ÔÚÒƶ¯¶ËÒÀÀµµÄÊÇËÙ¶ÈÏà¶Ô½ÏÂýµÄÎÞÏßÍøÂ磬ÉõÖÁÓпÉÄÜÊÇÔÚµçÌÝ»òÕßµØÌúÕâÖÖÐźŲ»Îȶ¨µÄµØ·½È¥·ÃÎÊÍøÕ¾¡£

ÔÚÕâÖÖÇé¿öϽ«¶àÕÅͼƬºÏ²¢µ½Ò»ÕÅͼƬºó£¬Ö»ÐèÒ»´ÎÍøÂçÇëÇó¾Í¿ÉÒÔ½«ËùÐèµÄÔ´×ÊÔ´È«²¿ÏÂÔØ£¬¼õС½¨Á¢Á¬½ÓµÄÏûºÄ£¬ÕâÔÚÒƶ¯¶ËµÄÓÅÊÆÓÈΪÃ÷ÏÔ¡£

3. Css SpriteµÄÓÅÊÆ

  • ¼õÉÙÍøÒ³µÄ http ÇëÇó¡£ ÀûÓÃCss SpriteÄܹ»ºÜºÃµØ¼õÉÙÍøÒ³µÄ http ÇëÇ󣬴Ӷø´ó´óµÄÌá¸ßÒ³ÃæµÄÐÔÄÜ£¬ÕâÒ²ÊÇÆä×î´óµÄÓŵ㣬ҲÊÇÆä±»¹ã·º´«²¥ºÍÓ¦ÓõÄÖ÷ÒªÔ­Òò¡£

  • ¼õÉÙͼƬµÄ´óС¡£ Css SpriteÄܹ»¼õÉÙͼƬµÄ´óС£¬3 ÕÅͼƬºÏ²¢³É 1 ÕÅͼƬµÄ´óС±ÈÕâ 3 ÕÅͼƬ¼ÓÆðÀ´µÄ´óС»¹ÒªÐ¡¡£

  • ¼ò»¯Í¼Æ¬ÃüÃû¡£ ½â¾öÁËÔÚͼƬÃüÃûÉϵÄÀ§ÈÅ£¬Ö»Ðè¶ÔÒ»ÕÅCss SpriteÃüÃû¾Í¿ÉÒÔÁË£¬²»ÐèÒª¶Ôÿһ¸öСԪËؽøÐÐÃüÃû£¬´Ó¶ø¼õÉÙÁ˵ôÍ··¢µÄ´ÎÊý¡£

  • ·½±ã¸ü»»Ö÷Ìâ¡£ Ö»ÐèÒªÔÚÒ»ÕÅ»òÉÙÕÅͼƬÉÏÐÞ¸ÄͼƬµÄÑÕÉ«»òÑùʽ£¬Õû¸öÍøÒ³µÄ·ç¸ñ¾Í¿ÉÒԸı䡣ά»¤ÆðÀ´¸ü¼Ó·½±ã¡£

4. С½á

×ÛÉÏËùÊö£¬ÎÒÃÇÒѾ­Á˽âÁËΪʲôҪ"¶à´ËÒ»¾Ù"µÄ°ÑСͼƬ¶¼¼¯ºÏÔÚ´óͼƬÀï¡£

²»¹ýÍâ½çÓÐһЩ´«ÑÔ˵Ëæ×Å HTTP2 µÄµ½À´£¬ÕâÖÖ¼¼ÊõÒѾ­¹ýʱÁË¡£

ÄÇôÕâЩ´«ÑÔÊÇ·ñΪÕæÄØ£¿Çë¿´ÏÂһС½Ú¡£

·µ»Ø¶¥²¿