CSS3 background-size ÊôÐÔ
ʵÀý
¹æ¶¨±³¾°Í¼ÏñµÄ³ß´ç£º
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
ä¯ÀÀÆ÷Ö§³Ö
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
IE9+¡¢Firefox 4+¡¢Opera¡¢Chrome ÒÔ¼° Safari 5+ Ö§³Ö background-size ÊôÐÔ¡£
¶¨ÒåºÍÓ÷¨
background-size ÊôÐԹ涨±³¾°Í¼ÏñµÄ³ß´ç¡£
ĬÈÏÖµ£º | auto |
---|---|
¼Ì³ÐÐÔ£º | no |
°æ±¾£º | CSS3 |
JavaScript Óï·¨£º | object.style.backgroundSize="60px 80px" |
Óï·¨
background-size: length|percentage|cover|contain;
Öµ | ÃèÊö | ²âÊÔ |
---|---|---|
length |
ÉèÖñ³¾°Í¼ÏñµÄ¸ß¶ÈºÍ¿í¶È¡£ µÚÒ»¸öÖµÉèÖÿí¶È£¬µÚ¶þ¸öÖµÉèÖø߶ȡ£ Èç¹ûÖ»ÉèÖÃÒ»¸öÖµ£¬ÔòµÚ¶þ¸öÖµ»á±»ÉèÖÃΪ "auto"¡£ |
²âÊÔ |
percentage |
ÒÔ¸¸ÔªËصİٷֱÈÀ´ÉèÖñ³¾°Í¼ÏñµÄ¿í¶ÈºÍ¸ß¶È¡£ µÚÒ»¸öÖµÉèÖÿí¶È£¬µÚ¶þ¸öÖµÉèÖø߶ȡ£ Èç¹ûÖ»ÉèÖÃÒ»¸öÖµ£¬ÔòµÚ¶þ¸öÖµ»á±»ÉèÖÃΪ "auto"¡£ |
²âÊÔ |
cover |
°Ñ±³¾°Í¼ÏñÀ©Õ¹ÖÁ×ã¹»´ó£¬ÒÔʹ±³¾°Í¼ÏñÍêÈ«¸²¸Ç±³¾°ÇøÓò¡£ ±³¾°Í¼ÏñµÄijЩ²¿·ÖÒ²ÐíÎÞ·¨ÏÔʾÔÚ±³¾°¶¨Î»ÇøÓòÖС£ |
²âÊÔ |
contain | °ÑͼÏñͼÏñÀ©Õ¹ÖÁ×î´ó³ß´ç£¬ÒÔʹÆä¿í¶ÈºÍ¸ß¶ÈÍêÈ«ÊÊÓ¦ÄÚÈÝÇøÓò¡£ | ²âÊÔ |
Ç××ÔÊÔÒ»ÊÔ - ʵÀý
- ÀÉì±³¾°Í¼Ïñ
- ÀÉì±³¾°Í¼ÏñÀ´ÍêÈ«¸²¸ÇÄÚÈÝÇøÓò¡£
- ÀÉì±³¾°Í¼Ïñ£¬¶Ô±³¾°Í¼Ïñˮƽ¸´ÖÆËÄ´Î
- ¶Ô±³¾°Í¼Ïñ½øÐÐÀÉ죬ÒÔʹ±³¾°Í¼ÏñÇ¡ºÃˮƽ¸´ÖÆËĴΡ£
Ïà¹ØÒ³Ãæ
CSS3 ½Ì³Ì£ºCSS3 ±³¾°