±¾ÎĽéÉÜһЩ¹ØÓÚÏìӦʽͼÏñµÄÊÊÅäÓ¦ÓòßÂÔ£¬»ØÍËÔÀí£¬SVGµÄ»»É«¼¼ÇÉ£¬Ñ©±ÌͼµÄ°Ù·Ö±È¶¨Î»¼ÆË㹫ʽµÈÏà¹ØµÄһЩС֪ʶµã£¬Ä¿µÄÔÚÓÚ°ïÖúÒ»²¿·Öͬѧ¿ìËÙµÄÀíÇåͼÏñÓ¦ÓÃ˼·£¬ÒÔ¼°Ò»Ð©webͼÏñµÄÓ¦Óü¼ÇÉ¡£
1. ÏìӦʽͼÏñµÄÓ¦ÓÃÓë»ØÍË
ÌØµã£ºÓ¦Óüòµ¥£¬ÉÏÊÖÈÝÒ×£¬ÐÔÄܱíÏÖÁ¼ºÃ
Äѵ㣺lazyloadʵÏÖ
¸ù¾Ý²»Í¬É豸£¬²»Í¬·Ö±æÂÊ£¬²»Í¬ÏñËØ±ÈʹÓõÄÏìӦʽͼÏñ£¬³£ÓõÄÓÐÁ½ÖÖ³¡¾°£º
1.1 ¹Ì¶¨³ß´çͼÏñ
»ùÓÚÉ豸ÏñËØ±ÈÑ¡Ôñ£¬ºÜ¶àÍøÕ¾logo¾ÍÊǹ̶¨¿í¶ÈͼÏñµÄÒ»¸öÀý×Ó£¬²»¹ÜviewportµÄ¿í¶ÈÈçºÎ£¬Ê¼ÖÕ±£³ÖÏàͬµÄ¿í¶È¡£
ÔÚdomÀïͼÏñÓëÔÚcssÀïµÄͼÏñд·¨ÈçÏÂÃæµÄÀý×Ó

1.2 ²»¹Ì¶¨³ß´çͼÏñ
ÓëÄÚÈÝÏà¹ØµÄͼƬ£¬ÔÚÐèÒªÏìӦʽµÄʱºò£¬ËüÃǵĴóСÍùÍù²¢²»ÊDz»±äµÄ£¬»áËæviewport¸Ä±ä£¬¶ÔÓÚÕâÀàͼÏñ£¬Ò²ÓÐÁ½ÖÖ³£ÓõĴ¦Àí·½Ê½
1.2.1 ÎÒÃÇʹÓÃsrcset´îÅäwÃèÊö·ûÒÔ¼°sizesÊôÐÔ
wÃèÊö·û¸æËßä¯ÀÀÆ÷ÁбíÖеÄÿ¸öͼÏóµÄÖÊÁ¿¡£sizesÊôÐÔÊÇÒ»¸ö°üº¬Á½¸öÖµµÄ£¬ÓɶººÅ·Ö¸ôµÄÁÐ±í¡£¸ù¾Ý×îй淶£¬Èç¹ûsrcsetÖÐÈκÎͼÏñʹÓÃÁËwÃèÊö·û£¬ÄÇô±ØÐëÒªÉèÖÃsizesÊôÐÔ¡£
sizesÊôÐÔÓÐÁ½¸öÖµ£ºµÚÒ»¸öÊÇýÌåÌõ¼þ£»µÚ¶þ¸öÊÇԴͼ³ß´çÖµ£¬ÔÚÌØ¶¨Ã½ÌåÌõ¼þÏ£¬´ËÖµ¾ö¶¨ÁËͼƬµÄ¿í¶È¡£

ÎÒÃÇÀ´ÖðÌõ¶ÁÕâÒ»¸öimg±êÇ©µÄÐÅÏ¢£º
srcset£¬ÎÒÃǸøä¯ÀÀÆ÷×¼±¸ÁËËĸöÖÊÁ¿µÄͼÏñ£¬·Ö±ðΪ360 768 1200 1920
sizes£¬ÎÒÃÇÀ´¸æËßä¯ÀÀÆ÷£¬ÔÚ²»Í¬µÄ»·¾³ÏÂͼÏñµÄ¿í¶È
µ±ÊÓ¿Ú²»´óÓÚ360µÄʱºò£¬Í¼ÏñÏÔʾ¿í¶ÈΪ100vw£¬µ±ÊÓ¿Ú²»´óÓÚ768µÄʱºò£¬Í¼ÏñÏÔʾ¿í¶ÈΪ90vw£¬ÒÔ´ËÀàÍÆ¡£
×îºóÒ»¸ösrc×÷ΪĬÈÏͼÏñurlÒýÈ룬²¢ÇÒÊÇÌìÈ»µÄ»ØÍË·½°¸£¬µ±ä¯ÀÀÆ÷²»ÈÏʶÒÔÉÏÊôÐÔµÄʱºò£¬Ö±½Ó¶ÁÈ¡srcäÖȾ¡£
ÕâÑù˵²»¹»Ö±¹Û£¬ÎÒÃÇ¿´¸ödemo£º

ÔÚiphone4£¨320£©Ï£¬Í¼Ïñ¿í¶ÈºÍÎÒÃÇÉèÖõÄ100vwÒ»Ö£¬µ«ÊÇΪʲôä¯ÀÀÆ÷Ñ¡ÔñÁË768µÄͼÏñ¶øÃ»ÓÐÑ¡Ôñ360µÄ?ÒòΪ4µÄdprÊÇ2ѽ^_^£¬ä¯ÀÀÆ÷ºÜÖÇÄܵÄÑ¡ÔñÁËÖÊÁ¿×îºÏÊʵÄ768.
ÔÙ¿´Ò»ÏÂ6p£¨414£©£¬ºÜÌý»°µÄ°´ÕÕÎÒÃǵÄÉèÖã¬ÏÔʾÁË90vw¡£ÒòΪËûµÄdpr¸ü¸ß£¬ä¯ÀÀÆ÷´ÏÃ÷µÄÑ¡ÔñÁË1200ÖÊÁ¿µÄͼÏñ¡£

ÕâÀïÎÒÃÇ¿ÉÒÔÆÛÆÒ»ÏÂä¯ÀÀÆ÷£º

ÎÒÃǰÑ360µÄͼÏñ£¬Æä¯ÀÀÆ÷˵ÕâÊÇ1200µÄ£¬È»ºó°ÑÔ±¾1200µÄÈÓÌìÉÏÈ¥

ä¯ÀÀÆ÷¹ûÈ»Éϵ±ÁË£¬Ëû°Ñ360µÄͼµ±³É1200µÄÀ´ÓÃÁË¡£ÕâÀï¿ÉÄÜÓÐЩÒÉÎÊ£¬Í¼ÏñµÄ¿í¶ÈΪʲô²»ÊÇ90vwÁËÄÄ£¿ÒòΪä¯ÀÀÆ÷±»ÆÁ˵«ÊÇ×Ô¼ºÈ´²»ÖªµÀ£¬ËûÒÀÈ»°´ÕÕ1200µÄͼÏñ£¬È¥ÊÊÅädpr¡£414*90%*£¨360/1200£©Ô¼µÈÓÚ111.7¡£ÕâÖÖ·½Ê½ºÜÖÇÄÜ£¬ä¯ÀÀÆ÷È¥¸ù¾ÝÄãµÄsizes£¬´ÓwÁбíÀïÑ¡Ôñ×îÊʺϵÄͼÏñÀ´µ÷ÓÃÏÔʾ¡£ÕýÒòΪËûÌ«ÖÇÄÜÁË£¬ÔÚʵ¼Ê²Ù×÷ÖпɿØÐԽϲÓÐЩÎÒÃÇÏ뾫ȷ¿ØÖƵÄͼÏñÏÔʾ£¬ÓÐʱºò²¢²»ÄÜÈçÒâ¡£¶øÇÒÔÚ×ölazyloadµÄʱºòÒª´¦ÀíµÄ¶«Î÷Ò²±È½Ï¸´ÔÓ¡£
Õâ¸öʱºò¿ÉÒÔ¿¼ÂÇÁíÍâÒ»ÖÖ·½Ê½¡£
1.2.2. pictureÔªËØ£¬¿É¾«È·°Ñ¿Ø
pictureÔªËØ¾ÍÏñÊÇͼÏñºÍÆäÔ´µÄÈÝÆ÷¡£ä¯ÀÀÆ÷ÈÔÈ»ÐèÒªimgÔªËØ£¬ÓÃÀ´±íÃ÷ÐèÒª¼ÓÔØÍ¼Æ¬£¬Èç¹ûûÓÐimg£¬ÄÇôʲô¶¼²»»áäÖȾ¡£sourceΪä¯ÀÀÆ÷ÌṩÁËÒªÏÔʾͼÏñµÄ¹©Ñ¡°æ±¾¡£
ÊÊÓ󡾰Ϊ£ºÔÚÒ»¸ö¾«È·Ìض¨µÄתЧµã£¨breakpoint£©ÐèÒªÏÔʾһ¸öÌØ¶¨µÄͼÏñʱ¡£Ê¹ÓÃpictureÔªËØÑ¡ÔñͼÏñ£¬²»»áÓÐÆçÒ壬Àí½âÆðÀ´Ò²¸üÖ±¹Û¡£

ÔÚ±¾ÀýÖУ¬µ±viewport´óÓÚ960ÏñËØÊ±£¬»á¼ÓÔØÍ¼Ïñ960µÄͼÏñ¡£µ±viewport¿í¶È´óÓÚ768ÏñËØÊ±£¬ä¯ÀÀÆ÷»á¼ÓÔØ768µÄ¡£¶øµ±¿í¶ÈСÓÚ768ÏñËØÊ±£¬¼ÓÔØÄ¬ÈÏͼÏñ360¡£
¶øÇÒÕâ¸öд·¨µÄÀÁ¼ÓÔØ·Ç³£ºÃ´¦Àí£¬Ö»ÐèÒªÔÚ´«Í³µÄlazyload²ßÂÔÉÏÉԼӸĽø
data-src
data-srcset
ÔÚ¼ÓÔØµ½µÄʱºò¸ü»»Îª
src
srcset |
¾ÍÇáËɽâ¾öÁË¡£
http://snghr.tencent.com ÀïÃæÊ¹Óý϶à
ËûÒ²²»ÐèÒªÈ¥ÌØÒâ×ö»ØÍË´¦Àí£¬µ±ä¯ÀÀÆ÷²»Ö§³ÖµÄʱºò¾ÍÖ±½Ó¶ÁÈ¡img±êÇ©¡£¶ÔÓÚÀÁ¼ÓÔØµÄ»ØÍË¡¡ÎÒÑ¡ÔñÅжÏIE
7-8¡Ö±½ÓÈûurl¸øËû¡..
2. ÌØÊâ¸ñʽµÄͼÏñÓ¦ÓÃÓë»ØÍË
ÌØµã£ºÌå»ýÓÅ»¯Ð§¹ûÏÔÖø
Äѵ㣺¼æÈÝÐÔÕÆ¿Ø
ÉÏÃæpictureÔªËØ»¹¿ÉÒÔÌṩ »ùÓÚͼƬ¸ñʽѡÔñ¡£
ÓÐһЩͼÏñ¸ñʽÔÚ½ÏСµÄÎļþ´óСÇé¿öϱ£Ö¤Á˽ϺõÄͼƬÖÊÁ¿¡£ÌýÆðÀ´»¹²»´í£¬µ«²Ð¿áµÄÊÂʵÊÇûÓÐÒ»¸öиñʽ±»ËùÓÐä¯ÀÀÆ÷Ö§³Ö¡£¹È¸èµÄWebP±íÏÖ²»´í£¬µ«Ö»ÓÐChromeºÍOperaÔÉùÖ§³Ö¡£JPEG-XR£¬×î³õ±»³ÆÎª¸ßÇåÕÕÆ¬£¬ÊÇ΢Èí·¢²¼µÄÒ»¸öרÓÐͼÏñ¸ñʽ£¬½öInternet
ExplorerÖ§³Ö¡£

sourceµÄtypeÊôÐÔÓÃÀ´Ö¸¶¨Ã¿¸öͼÏñµÄMIMEÀàÐÍ£¬ä¯ÀÀÆ÷»áÑ¡ÔñµÚÒ»¸öº¬ÓÐÆäÖ§³ÖµÄMIMEÀàÐ͵ÄÔ´¡£Ô´µÄ˳ÐòÊÇÖÁ¹ØÖØÒªµÄ£¬Èç¹ûä¯ÀÀÆ÷ÎÞ·¨Ê¶±ðËùÓеÄͼÏóÀàÐÍ£¬Ëü»á»ØÍËÖÁÔÀ´µÄimgÔªËØ¡£
µ«ÊÇĿǰÕâЩ¸ñʽµÄÖ§³Ö¶àÊý²»»áÖ±½ÓÕâô×ö£¬ÒòΪ´úÂë»áÓÐЩÈßÓàÄÑ¿´£¬ÓÐÅжÏä¯ÀÀÆ÷uaÊä³ö²»Í¬dom»òÕßÑùʽµÄ£¬Ò²ÓзþÎñ¶ËÖ±½ÓÊä³öµÄ¡£·þÎñ¶ËÖ±½ÓÊä³ö£¬»òÕßCDN×öÌØÊâ´¦Àí£¬½øÐÐÎÞ¸ÐÖª¸ñʽÇл»£¬Í¬Ê±Ô¤ÁôurlºÍ¾Ü¾øµÄ½Ó¿Ú£¬´¦ÀíÆðÀ´¸üÁé»î£¬Ê¡Ê±Ê¡Á¦£¬ÀýÈçÎÒÃǵģº


·þÎñ¶Ë¸ù¾Ýä¯ÀÀÆ÷µÄÇëÇóÍ·£¬·µ»Ø²»Í¬µÄͼÏñ¸ñʽ£¬¶ÔÓÚX5Äں˻¹¿ÉÒÔÖ§³ÖsharpP¡£
3. SVGÓ¦ÓÃ
Äѵ㣺±äÉ«·½°¸£¬ÏìӦʽ¶¨Î»¼ÆËã¡£
ÉÏÃæÕâ¸ösourceµÄtypeÊôÐÔ»¹Ö§³ÖÁíÒ»ÖÖÎÒÃǸü³£ÓõÄͼÏñ¸ñʽ£¬SVG¡£
˵ÆðSVG£¬ÕâÊǸö³öÏÖÆµÂʱÈwebp¸ü¸ßµÄͼÏñ¸ñʽÁË£¬ËûÓÐ×űÈiconfont¸ü¶àµÄÓŵ㣬ËùÒÔÏÖÔÚwebÉÏÕýÔÚ´óÁ¿µÄÓ¦Óá£
Óŵ㣺
SVGÌṩµÄ¹¦Äܼ¯º¸ÇÁËǶÌ×ת»»¡¢²Ã¼ô·¾¶¡¢AlphaͨµÀ¡¢Â˾µÐ§¹ûµÈÄÜÁ¦£¬Ëü»¹¾ß±¸ÁË´«Í³Í¼Æ¬Ã»ÓеÄʸÁ¿¹¦ÄÜ£¬¿ÉÊÊÅäÈκθßÇåÆÁ¡£
¿É¶ÁÐԺã¬ÓÐÀûÓÚSEOÓëÎÞÕϰ
Óëiconfont¶Ô±È£º
£¨1£©äÖȾ·½Ê½²»Í¬
ÎÞÂÛºÚ°×äÖȾ£¬»Ò¶ÈäÖȾ£¬´ÎÏñËØäÖȾ£¬»¹ÊÇDirectWrite »ò GDI äÖȾ£¬¼ÈÈ»iconfontËûÊÇÒ»¸ö×ÖÌ壬¾ÍÄÑÌÓ³öÏÖ¾â³ÝµÄÃüÔË£¬ÌرðÊÇÔÚÒ»±¶ÆÁĻϵÄäÖȾ¡£

£¨2£©icon fontÖ»ÄÜÖ§³Öµ¥É«
icon font×öΪ×ÖÌåÎÞ·¨Ö§³Ö¶àɫͼÐΣ¬Õâ¾Í¶ÔÉè¼ÆÔì³ÉÁËÐí¶àÏÞÖÆ£¬Òò´ËÕâÒ²³ÉΪÁËicon fontµÄÒ»¸öÆ¿¾±¡£
£¨3£©icon font¿É¶ÁÐÔ²»ºÃ
icon fontÖ÷ÒªÔÚÒ³ÃæÓÃUnicode·ûºÅµ÷ÓöÔÓ¦µÄͼ±ê£¬ÕâÖÖ·½Ê½²»¹ÜÊÇä¯ÀÀÆ÷£¬ËÑË÷ÒýÇæºÍ¶ÔÎÞÕϰ·½ÃæµÄÄÜÁ¦¶¼Ã»ÓÐSVGºÃ
ÔÚ¶Ô±ÈÍê֮ǰ£¬¿ÉÄÜÓÐͬѧ¾Í»áÎÊ£¬SVGºÍiconfont¶Ô±ÈÓиöÖÂÃüµÄȱµã£¬¾ÍÊÇ»»É«.
±ÈÈçhover»»É«£¬iconfontֻҪд¸öÑÕÉ«¾ÍºÃÁË£¬SVGÊDz»ÊÇÐèÒª×öÁ½¸öÑÕÉ«µÄͼ£¿ÕâÒ²ÊÇSVGͼÏñÓ¦ÓÃÎÒÃǽâ¾öµÄÒ»¸öÄѵãÖ®Ò»
SVG»»É«£¬×î³õÎÒÊÔ¹ýÈý¸ö·½°¸£º
£¨1£©mask-imageÊôÐÔ
ËüµÄÓŵãÊǼòµ¥´Ö±©£¬Ö±½ÓÓÃcssÀ´maskÕâ¸ösvgͼÐÎÀ´½øÐл»É«£¬È±µãºÜÃ÷ÏÔ¾ÍÊǼæÈÝÐÔÁË£¬³ýÈ¥¼æÈÝÐÔ£¬»¹ÊǺܺÃÓõġ£
demo£º

²é¿´demo
£¨2£©Í¨¹ýSVGÂ˾µÀ´ÊµÏÖ
ÓŵãÊÇЧ¹û¸üºÃ£¬È±µã³ýÁ˼æÈÝÐÔ£¬»¹ÐèÒª¶îÍâµÄ½Å±¾ÅäºÏ¡£¹ØÓÚÂ˾µ»»É«µÄÏêϸ˵Ã÷ÔÚÎÒÉÏһƪÎÄÕÂÀïÓÐÏêϸ½éÉÜÒÔ¼°demo
²é¿´ÎÄÕÂ
£¨3£©ÎÒÃÇ×îÖÕÑ¡ÔñµÄµ×²ãÎÞ¸ÐÖª»»É«µÄ·½°¸£¬°ÑÐÞ¸ÄÑÕÉ«µÄ½Å±¾¼¯³Éµ½ÁËÎÒÃǵŤ×÷Á÷ÀÎÒÃÇÔÚдcssµÄʱºò£¬Óöµ½svgÐèÒª»»É«µÄµØ·½£¬Ö»ÐèÒª

¼ÓÒ»¾ä»»É«²ÎÊý£¬¹¤×÷Á÷Ôڵײã»á×Ô¶¯Éú³ÉÄãËùÐèÒªµÄsvgͼƬ²¢ºÏ²¢µ½Ñ©±ÌͼÀï¡£
SVGÓ¦ÓõÄÁíÒ»¸öÄѵ㣬¾ÍÊÇ×÷Ϊ±³¾°Í¼ÏìӦʽäÖȾ£¬Ñ©±ÌͼµÄbackground-positionºÍbackground-size
µÄ¼ÆË㣬Õâ¸öÆäʵҲÊÇÆäËûͼÏñ¶¼»á´æÔÚµÄÒ»¸öÄѵ㡣
Îҵĵ¼Ê¦ wenju ֮ǰ·¢¹ýÕâ¸ö¼ÆË㹫ʽÏà¹ØµÄÎÄÕ£º
°Ù·Ö±ÈÖµ£¨£©ÊDZ³¾°Í¼Ïà¶ÔÓÚ±³¾°¶¨Î»Çø£¨background positioning area£©µÄ°Ù·Ö±È£¬¿ÉÒÔ¿ØÖÆÔÚÈÝÆ÷ÔªËØÄÚ½öÏÔʾSpritesͼµÄ²¿·ÖÄÚÈÝ¡£±ÈÈçÏÂͼÖУ¬SpritesͼÊÇÓÉËÄÕÅͼÏñÆ´³ÉµÄ£¬ÒªÏëÔÚÈÝÆ÷ÄÚ½öÏÔʾµÚÒ»ÕÅͼÏñ£¬background-sizeµÄÖµÓ¦¸Ã¶àÉÙÄØ£¿

ÎÒÃǽöÐèÒªSpritesͼµÄ1/4ÏÔʾÔÚÈÝÆ÷ÄÚ£¬ÄÇôSpritesͼÓëÈÝÆ÷µÄ±ÈÀýÓ¦¸ÃÊÇ4:1£¬¼ÆË㹫ʽΪ£º
background-size : ( Sprites width / image width) (Sprites
height / image height)

ÈçºÎ¼ÆËãbackground-position
ÎÒÃÇÒÑÖªµÄÐÅÏ¢ÈçÏ£º
ÈÝÆ÷ÔªËØµÄ³ß´ç£ºelW * elH
µ¥ÕÅͼƬµÄ³ß´ç£ºimgW * imgH
SpritesͼƬµÄ³ß´ç£ºspritesW * spritesH
µ¥ÕÅͼƬÔÚSpritesͼÉϵÄλÖãºimgPosX, imgPosY |
ÎÒÃǼÙÉ裺
µãµÄλÖÃΪ (x, y)
ÈÝÆ÷ÉϵÄ(x, y)µãÓëÈÝÆ÷×óÉϽǵľàÀëΪ cX, cY
SpritesͼÉϵÄ(x, y)µãÓë±¾ÕÅͼƬ×óÉϽǵľàÀëΪ sX, sY |
Èç¹ûÒª°ÑijÕÅͼƬÍêÈ«ÏÔʾÔÚÈÝÆ÷ÔªËØÄÚ£¬ÎÒÃÇ¿ÉÒÔÍÆµ¼³ö£º
elW = imgW, elH = imgH
cX = sX, cY = sY |
¸ù¾ÝÉÏÃæµÄÐÅÏ¢£¬ÎҾͿÉÒÔ¼ÆËã³ö¾ßÌåµÄ(x, y)ÖµÁË£¬ÏÂÃæÒÔ x% ΪÀý£º
cX = elW * x
sX = spritesW * x ¨C imgPosX
elW * x = spritesW * x ¨C imgPosX |
½â·½³Ìºó¾ÍµÃµ½¼ÆË㹫ʽÁË£º
x = imgPosX / (spritesW ¨C elW) = imgPosX / (spritesW
¨C imgW)
y = imgPosY / (spritesH ¨C elH) = imgPosY / (spritesH
¨C imgH) |
Èç¹ûÄãÿ´Î¶¼ÊÖ¶¯¼ÆËãµÄ»°»á±»ÀÛËÀ°É£¿ËùÒÔÕâÒ»²½ÎÒÃÇ»¹ÊǼ¯³Éµ½Á˹¤×÷Á÷ÀÔÚËùÓкϲ¢Ñ©±ÌͼµÄµØ·½ÓÃÕâ¸ö¹«Ê½×Ô¶¯¼ÆËã³öλÖá£

¶ø¹ØÓÚSVGµÄ»ØÍË·½°¸£¬ÒѾÊÇÀÏÉú³£Ì¸¡£
±ÈÈç

svg±êÇ©·½Ê½£¬È±µã±ØÐëÖ¸¶¨¿í¸ß£¬Ã»ÓÐͼƬµÄ±£³Ö¿î¸ß±ÈÀýÌØÐÔ£¬ÓÅµã¼æÈÝÐÔºÃ,¼æÈÝËùÓÐÖ÷Á÷ä¯ÀÀÆ÷
»òÕß

ÔÚÖ§³ÖµÄä¯ÀÀÆ÷ÀïʹÓÃSVG£¬ÔÚ²»Ö§³ÖµÄä¯ÀÀÆ÷ÀïÏÔʾPNG£¬ÓŵãÊÇtypeÁé»î£¬¿ÉÓÃÓÚSVG,WEBPµÈ£¬¶øÇÒ±£³ÖÁËimg±êÇ©µÄÌØÐÔ£¬·½±ã×ö²¼¾Ö²Ù×÷¡£È±µã¼æÈÝÐÔÒªÇó¸ß£¬ios9+£¬°²×¿5+£¬Î¢ÈíEdge+
µ±È»Õâ¸ö¼æÈÝÐÔ˵µÄÊÇsource typeµÄ¼æÈÝ£¬²¢²»ÊÇSVG±¾ÉíµÄ¼æÈÝ¡£
¶ÔÓÚcssÀïµÄSVG µÄÓ¦ÓÃÓë»ØÍ˲ßÂÔ£¬±È½Ï¼òµ¥£¬Ò²ÒѾ³ÉÊ죬һ°ãÇé¿ö϶¼ÊÇÕâÖÖÓ÷¨

ÀûÓõļ¼ÊõÊÇCSS3¶à±³¾°£¬ä¯ÀÀÆ÷Ö»ÒªÖ§³ÖÁ˶౳¾°£¬¼¸ºõÎÞÒ»ÀýÍâÖ§³ÖSVG
ÔÙ»òÕß

ͨ¹ýimage-setÀ´É¸Ñ¡ºÍ»ØÍË¡£ |