{"id":1618,"date":"2011-05-08T23:52:08","date_gmt":"2011-05-08T15:52:08","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=1618"},"modified":"2018-01-01T23:40:28","modified_gmt":"2018-01-01T15:40:28","slug":"%e7%bf%bb%e8%af%91-css3-backgrounds%e7%9b%b8%e5%85%b3%e4%bb%8b%e7%bb%8d","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2011\/05\/%e7%bf%bb%e8%af%91-css3-backgrounds%e7%9b%b8%e5%85%b3%e4%bb%8b%e7%bb%8d\/","title":{"rendered":"\u7ffb\u8bd1 &#8211; CSS3 Backgrounds\u76f8\u5173\u4ecb\u7ecd"},"content":{"rendered":"<p>by <a href=\"http:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"http:\/\/www.zhangxinxu.com\/\">http:\/\/www.zhangxinxu.com<\/a><br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=1618\">http:\/\/www.zhangxinxu.com\/wordpress\/?p=1618<\/a><\/p>\n<h3>\u5c0f\u5c0f\u5f15\u8a00<\/h3>\n<p>\u539f\u8bfe\u4ef6\u5185\u5bb9\u5982\u4e0b\uff1a<\/p>\n<div style=\"width:425px\" id=\"__ss_7772883\"> <strong style=\"display:block;margin:12px 0 4px\"><a href=\"http:\/\/www.slideshare.net\/maxdesign\/css3-backgrounds\" title=\"CSS3 Backgrounds\">CSS3 Backgrounds<\/a><\/strong> <iframe loading=\"lazy\" src=\"http:\/\/www.slideshare.net\/slideshow\/embed_code\/7772883\" width=\"425\" height=\"355\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe> <\/p>\n<div style=\"padding:5px 0 12px\"> \u67e5\u770b\u66f4\u591a<a href=\"http:\/\/www.slideshare.net\/maxdesign\">Russ Weakley<\/a>\u7684<a href=\"http:\/\/www.slideshare.net\/\">\u8bfe\u4ef6<\/a> <\/div>\n<\/p><\/div>\n<p>\u5c31\u4e0a\u5468\u624d\u51fa\u6765\u7684\uff0c\u4e2a\u4eba\u89c9\u5f97\u5bf9\u4e8e\u5b66\u4e60\u5f88\u6709\u5e2e\u52a9\uff0c\u4e8e\u662f\u51b3\u5b9a\u7ffb\u8bd1\u4e0b\uff0c\u4e0d\u8fc7\u4f5c\u8005\u4f3c\u4e4e\u5c06\u4e0b\u8f7d\u529f\u80fd\u5173\u95ed\u4e86\uff0c\u4e8e\u662f\u4e0d\u80fd\u518d\u539fpdf\u6587\u4ef6\u4e0a\u4fee\u6539\uff0c\u4e0d\u5f97\u5df2\uff0c\u81ea\u5df1\u5c31\u6574\u4e86\u4e2a\u957f\u957f\u7684HTML\u7248\u672c\u7684\uff0c\u4e5f\u5373\u662f\u4e0b\u9762\u7684\u4e9b\u5185\u5bb9\u4e86\u3002<\/p>\n<p><span class=\"s\">&#8212;&#8212;&#8212;&#8212;&#8212;\u4ee5\u4e0b\u4e3a\u7ffb\u8bd1\u5185\u5bb9&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><\/p>\n<p>CSS2.1\u4e2d\u67095\u4e2abackground\u5c5e\u6027\u53ef\u4ee5\u7528\u6765\u63a7\u5236\u5143\u7d20\u7684\u80cc\u666f\u3002\u8fd95\u4e2a\u5c5e\u6027\u662f\uff1a<\/p>\n<ul>\n<li><code>background-color<\/code><\/li>\n<li><code>background-image<\/code><\/li>\n<li><code>background-repeat<\/code><\/li>\n<li><code>background-attachment<\/code><\/li>\n<li><code>background-position<\/code><\/li>\n<\/ul>\n<p>\u4e3a\u4e86\u66f4\u597d\u7684\u9a7e\u9a6d\u80cc\u666f\u56fe\u7247\uff0cCSS3\u6dfb\u52a0\u4e863\u4e2a\u65b0\u7684background\u76f8\u5173\u5c5e\u6027\uff0c\u4ee5\u53ca\u4e00\u7cfb\u5217\u7684\u76f8\u5173\u5c5e\u6027\u503c\u3002<\/p>\n<p>\u4e0d\u8fc7\u5728\u6211\u4eec\u4e0e\u8fd9\u51e0\u4e2a\u65b0\u5c5e\u6027\u4eb2\u5bc6\u63a5\u89e6\u4e4b\u524d\u9700\u8981\u77e5\u90533\u4e2a\u91cd\u8981\u7684\u76d2\u5b50\u3002<\/p>\n<h3>\u4e09\u4e2a\u76d2\u5b50<\/h3>\n<p>\u5047\u8bbe\u73b0\u5728\u6709\u4e2a\u5bb9\u5668\uff0c\u5bb9\u5668\u91cc\u9762\u6709\u4e9b\u5185\u5bb9\uff0c\u867d\u7136\u6211\u4eec\u770b\u4e0d\u89c1\uff0c\u4f46\u662f\u8fd9\u4e9b\u5185\u5bb9\u7684\u5916\u9762\u662f\u6709\u4e00\u4e2a\u76d2\u5b50\u7684\uff0c\u8fd9\u4e2a\u76d2\u5b50\u5c31\u662f<code>content-box<\/code>\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_112838.png\" width=\"214\" height=\"272\" \/><\/div>\n<p style=\"color:#999;\"><span class=\"s\">\/\/zxx:\u8fd9\u91cc\u7684\u82f1\u6587\u539f\u6587\u662f\uff1a&#8221;The quick brown fox jumped over the lazy web developer. &#8220;\uff0c\u800c\u5b9e\u9645\u4e0a\uff0c\u8fd9\u91cc\u7684\u82f1\u6587\u4e5f\u4e0d\u662f\u6700\u539f\u59cb\u7684\uff0c\u662f\u4f5c\u8005\u4ece&#8221;The quick brown fox jumped over the lazy dog! &#8220;\u8fd9\u53e5\u8bdd\u6539\u7f16\u800c\u6765\u7684\uff0c\u81f3\u4e8e\u8fd9\u91cc\u7684\u539f\u8bdd\u5b9e\u9645\u4e0a\u6ca1\u6709\u4ec0\u4e48\u7279\u6b8a\u7684\u610f\u601d\uff0c\u53ea\u662f\u8fd9\u53e5\u8bdd\u5305\u542b\u4e86\u82f1\u6587\u4e2d\u5168\u90e8\u768426\u4e2a\u5b57\u6bcd\u3002\u8fd9\u91cc\uff0c\u6211\u6309\u7167\u5b57\u9762\u610f\u601d\u6574\u4e2a\u4e86\u6253\u6cb9\u8bd7\u3002<\/span><\/p>\n<p>\u73b0\u5728\uff0c\u5982\u679c\u6211\u4eec\u7ed9\u5bb9\u5668\u7684\u6bcf\u4e2a\u8fb9\u4e0a\u589e\u52a0<code>padding<\/code>\uff0c\u6211\u4eec\u5c06\u4f1a\u5f97\u5230\u4e00\u4e2a\u65b0\u7684\u76d2\u5b50\uff0c\u5373<code>padding-box<\/code>\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_115117.png\" width=\"285\" height=\"348\" \/><\/div>\n<p>\u5982\u679c\u6211\u4eec\u7ed9\u5bb9\u5668\u7684\u6bcf\u4e2a\u8fb9\u8fb9\u6846\u4e0a\u8fb9\u6846\uff08\u8fd9\u91cc\u65ad\u53e5\u5982\u4e0b\uff1a\u6bcf\u4e2a\u8fb9\u8fb9 \u6846\u4e0a \u8fb9\u6846\uff09\u3002\u6211\u4eec\u5c06\u4f1a\u8fce\u6765\u7b2c\u4e09\u4e2a\u76d2\u5b50\u2014\u2014<code>border-box<\/code>\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_145532.png\" width=\"363\" height=\"378\" \/><\/div>\n<p>\u8fd9\u4e09\u4e2a\u76d2\u5b50\u7528\u6765\u786e\u5b9a\u80cc\u666f\u56fe\u7247\u7684\u843d\u811a\u4e4b\u5904\uff0c\u4ee5\u4f55\u79cd\u5c3a\u5bf8\u663e\u793a\uff0c\u4ee5\u53ca\u54ea\u4e2a\u5730\u65b9\u8981\u4fee\u526a\u3002<\/p>\n<p>\u540e\u9762\u4f1a\u4e13\u95e8\u82b1\u53e3\u6c34\u8bb2\u8fd9\u4e09\u4e2a\u76d2\u5b50\uff0c\u4f46\u662f\uff0c\u773c\u4e0b\uff0c\u5148\u63ed\u5f00<code>background-position<\/code>\u4ee5\u53ca<code>background-repeat<\/code>\u7f9e\u6da9\u7684\u9762\u7eb1\u3002<\/p>\n<h3>background-position<\/h3>\n<p>\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u80cc\u666f\u56fe\u7247(background images)\u662f\u5728<code>padding-box<\/code>\u7684\u5de6\u4e0a\u89d2\u843d\u811a\u5b89\u5bb6\u7684\u3002\u5982\u4e0b\u56fe\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_151920.png\" width=\"480\" height=\"381\" \/><\/div>\n<p>\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528<code>background-position<\/code>\u5c5e\u6027\u6539\u53d8\u9ed8\u8ba4\u7684\u4f4d\u7f6e\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_152610.png\" width=\"578\" height=\"126\" \/><\/div>\n<p>\u5728CSS2.1\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u4e24\u4e2a\u503c\u6765\u51b3\u5b9a\u80cc\u666f\u56fe\u7247\u76f8\u5bf9\u4e8e\u5143\u7d20\u7684\u4f4d\u7f6e\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_152920.png\" width=\"577\" height=\"180\" \/><\/div>\n<p>\u5176\u4e2d\u7b2c\u4e00\u4e2a\u503c\u51b3\u5b9a\u4e86\u6c34\u5e73\u4f4d\u7f6e\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_153054.png\" width=\"578\" height=\"177\" \/><\/div>\n<p>\u7b2c\u4e8c\u4e2a\u503c\u51b3\u5b9a\u4e86\u5782\u76f4\u4f4d\u7f6e\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_153345.png\" width=\"578\" height=\"182\" \/><\/div>\n<p>\u5728CSS3\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u7ed9<code>background-position<\/code>\u5c5e\u6027\u6307\u5b9a\u9ad8\u8fbe4\u4e2a\u503c\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_153851.png\" width=\"578\" height=\"178\" \/><\/div>\n<p>\u5f00\u59cb\u7684\u4e24\u4e2a\u503c\u4ee3\u8868\u4e86\u6c34\u5e73\u8f74\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_154106.png\" width=\"578\" height=\"160\" \/><\/div>\n<p>\u540e\u9762\u7684\u4e24\u4e2a\u503c\u4ee3\u7801\u5782\u76f4\u8f74\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_154350.png\" width=\"580\" height=\"153\" \/><\/div>\n<p>\u8fd9\u662f\u5f88\u5f3a\u5927\u7684\u201c\u88c5\u5907\u201d\u5347\u7ea7\uff0c\u8fd9\u610f\u5473\u7740\u6211\u4eec\u53ef\u4ee5\u76f8\u5bf9\u4e8e\u4e0a\u4e0b\u5de6\u53f3\u4efb\u610f\u4e00\u4e2a\u89d2\u843d\u5b9a\u4f4d\uff0c\u800c\u4e0d\u662f\u4e4b\u524d\u7684\u53ea\u80fd\u76f8\u5bf9\u4e8e\u5de6\u4e0a\u89d2\u5b9a\u4f4d\u3002<\/p>\n<p><strong>\u6b63\u503c\u548c\u8d1f\u503c<\/strong><\/p>\n<p>\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u6b63\u503c\u51b3\u5b9a\u80cc\u666f\u56fe\u7247\u7684\u4f4d\u7f6e\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u8d1f\u503c\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_155021.png\" width=\"578\" height=\"174\" \/><\/div>\n<p>\u6b63\u503c\u6240\u4ea7\u751f\u7684\u6548\u679c\u662f\u628a\u80cc\u666f\u56fe\u7247\u5f80\u53f3\u4e0b\u65b9\u79fb\u52a8\u2014\u2014\u5143\u7d20\u80cc\u666f\u533a\u57df\u5185\u90e8\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_160559.png\" width=\"362\" height=\"320\" \/><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_160816.png\" width=\"341\" height=\"319\" \/><\/div>\n<p>\u8d1f\u503c\u4ea7\u751f\u7684\u6548\u7528\u662f\u628a\u80cc\u666f\u56fe\u7247\u5f80\u5de6\u4e0a\u65b9\u5411\u79fb\u52a8\u2014\u2014\u5143\u7d20\u80cc\u666f\u533a\u57df\u5916\u9762\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_162742.png\" width=\"403\" height=\"309\" \/><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_162921.png\" width=\"350\" height=\"391\" \/><\/div>\n<h3>background-repeat<\/h3>\n<p>\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u80cc\u666f\u56fe\u7247\u4f1a\u6cbf\u7740x\u8f74\uff0cy\u8f74\u91cd\u590d\u3002\u540c\u6837\u7684\uff0c\u662f\u8d77\u59cb\u4e8e<code>padding-box<\/code>\u7684\u5de6\u4e0a\u89d2\u3002\u5c3d\u7ba1\u80cc\u666f\u56fe\u7247\u5e73\u94fa\u8d77\u59cb\u4e8e<code>padding-box<\/code>\u5de6\u4e0a\u89d2\uff0c\u4f46\u662f\u5176\u4ece\u5404\u4e2a\u65b9\u5411\u671d\u5916\u9762\u5e73\u94fa\uff0c\u5305\u62ec<code>border<\/code>\u533a\u57df\u3002<\/p>\n<div><img decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_165956.png\" \/><\/div>\n<p>\u5728CSS2.1\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u56db\u4e2a\u4e0d\u540c\u7684\u5173\u952e\u5b57\u6539\u53d8\u5e73\u94fa\u7684\u884c\u4e3a\uff0c\u5982\u4e0b\uff1a<\/p>\n<ul>\n<li><code>repeat<\/code><\/li>\n<li><code>repeat-x<\/code><\/li>\n<li><code>repeat-y<\/code><\/li>\n<li><code>no-repeat<\/code><\/li>\n<\/ul>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_170853.png\" width=\"325\" height=\"373\" \/><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_170937.png\" width=\"329\" height=\"357\" \/><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_171030.png\" width=\"300\" height=\"356\" \/><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_171037.png\" width=\"306\" height=\"356\" \/><\/div>\n<p><strong>repeat repeat?<\/strong><\/p>\n<p>\u5728CSS3\u4e2d\uff0c\u6211\u4eec\u5b9a\u4e49<code>repeat<\/code>\u7684\u65f6\u5019\u53ef\u4ee5\u4f7f\u7528\u4e24\u4e2a\u503c\u4ee3\u66ff\u4e00\u4e2a\u503c\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_171525.png\" width=\"579\" height=\"144\" \/><\/div>\n<p>\u5176\u4e2d\u7b2c\u4e00\u4e2a\u503c\u4ee3\u8868\u6c34\u5e73\u8f74\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_171701.png\" width=\"578\" height=\"187\" \/><\/div>\n<p>\u7b2c\u4e8c\u4e2a<code>repeat<\/code>\u8868\u793a\u5782\u76f4\u8f74\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_172052.png\" width=\"578\" height=\"186\" \/><\/div>\n<p>\u5982\u679c\u6211\u4eec\u53ea\u4f7f\u7528\u4e00\u4e2a\u503c\uff0c\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u89e3\u91ca\u6210\u4e24\u4e2a\u503c\u3002\u8fd9\u5c31\u4fdd\u8bc1\u4e86<code>background-repeat<\/code>\u5c5e\u6027\u5411\u540e\u517c\u5bb9\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_172427.png\" width=\"578\" height=\"144\" \/><\/div>\n<h3>\u4f7f\u7528&#8221;sapce&#8221;\u548c&#8221;round&#8221;<\/h3>\n<p>CSS3\u5141\u8bb8\u6211\u4eec\u4f7f\u7528<code>background-repeat<\/code>\u5c5e\u6027\u4e24\u4e2a\u65b0\u503c\uff1a<code>space<\/code>\u548c<code>round<\/code>\u3002\u5176\u517c\u5bb9\u6027\u5982\u4e0b\u8868\uff1a<\/p>\n<table width=\"500\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\" class=\"params_table\">\n<tr>\n<th scope=\"col\">\u6d4f\u89c8\u5668<\/th>\n<th scope=\"col\">space<\/th>\n<th scope=\"col\">round<\/th>\n<\/tr>\n<tr>\n<td>Firefox 3.6, Firefox 4<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Safari 4, Safari 5<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Chrome 10<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>IE6, IE7, IE8<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>IE9<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Opera 10, Opera 11<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<\/table>\n<p><code>space<\/code>\u503c\u7684\u529f\u6548\u53ef\u4ee5\u7b80\u5355\u7406\u89e3\u4e3a\u56fe\u7247\u7684\u4e24\u7aef\u5bf9\u9f50\u5e73\u94fa\uff0c\u591a\u51fa\u6765\u7684\u7a7a\u95f4\u7528\u7a7a\u767d\u4ee3\u66ff\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_175803.png\" width=\"578\" height=\"105\" \/><\/div>\n<p>\u5448\u73b0\u6548\u679c\u5927\u81f4\u5982\u4e0b\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_175925.png\" width=\"408\" height=\"357\" \/><\/div>\n<p><code>round<\/code>\u5c5e\u6027\u7684\u6548\u679c\u4e5f\u53ef\u4ee5\u8bf4\u662f\u4e24\u7aef\u5bf9\u9f50\uff0c\u4f46\u5176\u591a\u51fa\u6765\u7a7a\u95f4\u901a\u8fc7\u81ea\u8eab\u7684\u62c9\u4f38\u6765\u586b\u5145\u3002<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_225249.png\" width=\"578\" height=\"112\" \/><\/div>\n<p>\u5448\u73b0\u6548\u679c\u5927\u81f4\u5982\u4e0b\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-06_225406.png\" width=\"408\" height=\"357\" \/><\/div>\n<p>\u4e0d\u8fc7\u9700\u8981\u6ce8\u610f\u7684\u662f\u4f7f\u7528\u8fd9\u79cd\u65b9\u6cd5\u56fe\u7247\u53ef\u80fd\u4f1a\u88ab\u62c9\u4f38\u6216\u626d\u66f2\u3002\u8fd9\u4e9b\u65b0\u503c\u8ba9\u6211\u4eec\u5728\u5e03\u5c40\u80cc\u666f\u56fe\u7247\u7684\u65f6\u5019\u66f4\u7075\u6d3b\u4e86\u3002\u4f8b\u5982\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u4e24\u4e2a\u503c\u6765\u5b9a\u4e49\u4e0d\u540c\u7684\u5782\u76f4\u548c\u6c34\u5e73\u884c\u4e3a\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_201227.png\" width=\"578\" height=\"99\" \/><\/div>\n<h3>\u4e09\u4e2a\u65b0\u5c5e\u6027<\/h3>\n<p>\u5728CSS3\u4e2d\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u4e09\u4e2a\u5168\u65b0\u7684\u5c5e\u6027\uff0c\u5982\u4e0b\uff1a<\/p>\n<ul>\n<li><code>background-origin<\/code><\/li>\n<li><code>background-clip<\/code><\/li>\n<li><code>background-size<\/code><\/li>\n<\/ul>\n<p><strong>background-origin<\/strong><\/p>\n<p>\u5173\u4e8eCSS3 <code>background-origin<\/code>\u57fa\u7840\u77e5\u8bc6\u4ee5\u53ca\u6548\u679cdemo\u53ef\u4ee5\u53c2\u89c1<a class=\"a_link\" target=\"_blank\" href=\"http:\/\/www.zhangxinxu.com\/css3\/css3-background-origin.php\">\u8fd9\u91cc<\/a>\u3002<code>background-origin<\/code>\u662f\u7528\u6765\u51b3\u5b9a\u80cc\u666f\u56fe\u7247\u5b9a\u4f4d\u5728\u54ea\u4e2a\u76d2\u5b50\u4e2d\u3002\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528<code>background-origin<\/code>\u5c5e\u6027\u7684\u4e09\u4e2a\u503c\u8fdb\u884c\u80cc\u666f\u56fe\u7247\u7684\u5b9a\u4f4d\uff0c\u5b83\u4eec\u662f\uff1a<code>content-box<\/code>\u3001<code>padding-box<\/code>\u4ee5\u53ca<code>border-box<\/code>\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_203325.png\" width=\"417\" height=\"366\" \/><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_203544.png\" width=\"403\" height=\"357\" \/><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_203749.png\" width=\"404\" height=\"357\" \/><\/p>\n<p>\u517c\u5bb9\u6027\u5982\u4e0b\u8868\uff1a<\/p>\n<table width=\"500\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\" class=\"params_table\">\n<tr>\n<th scope=\"col\">\u6d4f\u89c8\u5668<\/th>\n<th scope=\"col\">background-origin<\/th>\n<\/tr>\n<tr>\n<td>Firefox 3.6, Firefox 4<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Safari 4, Safari 5<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Chrome 10<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>IE6, IE7, IE8<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>IE9<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Opera 10, Opera 11<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<\/table>\n<p><strong>background-clip<\/strong><\/p>\n<p>\u5173\u4e8eCSS3 <code>background-clip<\/code>\u57fa\u7840\u77e5\u8bc6\u4ee5\u53ca\u6548\u679cdemo\u53ef\u4ee5\u53c2\u89c1<a class=\"a_link\" target=\"_blank\" href=\"http:\/\/www.zhangxinxu.com\/css3\/css3-background-clip.php\">\u8fd9\u91cc<\/a>\u3002<code>background-clip<\/code>\u5c5e\u6027\u662f\u7528\u6765\u51b3\u5b9a\u5728\u80cc\u666f\u533a\u57df\u4e2d\u80cc\u666f\u56fe\u7247\u526a\u88c1\u7684\u4f4d\u7f6e\u3002\u5176\u652f\u6301\u4e09\u4e2a\u503c\uff0c\u4e3a\uff1a<code>content-box<\/code>\u3001<code>padding-box<\/code>\u4ee5\u53ca<code>border-box<\/code>\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_204844.png\" width=\"448\" height=\"355\" \/><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_205046.png\" width=\"447\" height=\"354\" \/><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_205258.png\" width=\"447\" height=\"353\" \/><\/p>\n<p>\u517c\u5bb9\u6027\u5982\u4e0b\u8868\uff1a<\/p>\n<table width=\"500\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\" class=\"params_table\">\n<tr>\n<th scope=\"col\">\u6d4f\u89c8\u5668<\/th>\n<th scope=\"col\">background-clip<\/th>\n<\/tr>\n<tr>\n<td>Firefox 3.6<\/td>\n<td align=\"center\"><span style=\"color:#f30;\">\u89c1\u4e0b\u9762\u7684\u5907\u6ce8\u8bf4\u660e<\/span><\/td>\n<\/tr>\n<tr>\n<td>Firefox 4<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Safari 4, Safari 5<\/td>\n<td align=\"center\">-webkit-background-clip<\/td>\n<\/tr>\n<tr>\n<td>Chrome 10<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>IE6, IE7, IE8<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>IE9<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Opera 10, Opera 11<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<\/table>\n<p><strong>\u5907\u6ce8\u8bf4\u660e\uff1a<\/strong>Firefox 1.0 ~Firefox 3.6\u652f\u6301\u8001\u7684\u89e3\u6790\uff1a<code>border<\/code>\u548c<code>padding<\/code>\uff0c\u4f46\u662f\u5e76\u4e0d\u652f\u6301<code>content<\/code>\u4ee5\u53ca\u540e\u6765\u7684<code>content-box<\/code>\u503c\u3002<\/p>\n<p><strong>background-size<\/strong><\/p>\n<p>\u5173\u4e8eCSS3 <code>background-size<\/code>\u57fa\u7840\u77e5\u8bc6\u4ee5\u53ca\u6548\u679cdemo\u53ef\u4ee5\u53c2\u89c1<a class=\"a_link\" target=\"_blank\" href=\"http:\/\/www.zhangxinxu.com\/css3\/css3-background-size.php\">\u8fd9\u91cc<\/a>\u3002<\/p>\n<p>\u5728CSS2.1\u4e2d\uff0c\u6211\u4eec\u662f\u6ca1\u6709\u529e\u6cd5\u63a7\u5236\u80cc\u666f\u56fe\u7247\u7684\u5927\u5c0f\u7684\u3002\u7136\u800c\uff0c\u5728CSS3\u4e2d\u5141\u8bb8\u6211\u4eec\u4f7f\u7528<code>background-size<\/code>\u5c5e\u6027\u6765\u63a7\u5236\u80cc\u666f\u56fe\u7247\u7684\u5927\u5c0f\u3002\u4f8b\u5982\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_210731.png\" width=\"578\" height=\"124\" \/><\/div>\n<p>\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u957f\u5ea6\u503c\u6216\u662f\u767e\u5206\u6bd4\uff0c\u6216\u8005\u662f\u4e24\u4e2a\u65b0\u7684\u5173\u952e\u5b57\uff1a<code>contain<\/code>\u548c<code>cover<\/code>\u3002<\/p>\n<p>\u4f8b\u5982\u4e0a\u56fe\u4e2d\u7684\u7b2c\u4e00\u4e2a\u503c\u8868\u793a\u5bbd\u5ea6\uff0c\u7b2c\u4e8c\u4e2a\u503c\u8868\u793a\u9ad8\u5ea6\uff0c\u5982\u4e0b\u793a\u610f\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_211542.png\" width=\"578\" height=\"142\" \/><\/p>\n<p>\u5982\u679c\u53ea\u8bbe\u7f6e\u4e86\u4e00\u4e2a\u503c\uff0c\u90a3\u4e48\u7b2c\u4e8c\u4e2a\u503c\u4f1a\u81ea\u52a8\u7528\u521d\u59cb\u503c&#8221;<code>auto<\/code>&#8220;\u4ee3\u66ff\uff0c\u5982\u4e0b\u56fe\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_211749.png\" width=\"578\" height=\"140\" \/><\/p>\n<p>&#8220;<code>contain<\/code>&#8220;\u503c\u7684\u6548\u7528\u662f\u6309\u6bd4\u4f8b\u5c06\u56fe\u7247\u7f29\u653e\u5230\u6700\u5927\u5c3a\u5bf8\u4ee5\u4f7f\u5176\u9ad8\u5bbd\u90fd\u5728\u80cc\u666f\u533a\u57df\u91cc\u9762\uff0c\u5176\u4e3b\u8981\u7528\u5728\u80cc\u666f\u56fe\u7247\u6bd4\u5bb9\u5668\u5927\u7684\u60c5\u51b5\u4e0b\u3002\u9700\u6ce8\u610f\u4f7f\u7528\u8be5\u503c\u56fe\u7247\u53ef\u80fd\u6709\u626d\u66f2\u3002<\/p>\n<div class=\"zxx_code\">\n<pre>div { background-size: contain; }<\/pre>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_212231.png\" width=\"423\" height=\"387\" \/><\/p>\n<p>&#8220;<code>cover<\/code>&#8220;\u503c\u7684\u6548\u7528\u662f\u6309\u6bd4\u4f8b\u5c06\u56fe\u7247\u7f29\u653e\u5230\u6700\u5c0f\u5c3a\u5bf8\u4ee5\u4f7f\u5176\u5b8c\u6574\u8986\u76d6\u80cc\u666f\u533a\u57df\uff0c\u5176\u4e3b\u8981\u7528\u5728\u80cc\u666f\u56fe\u7247\u6bd4\u5bb9\u5668\u5c0f\u7684\u60c5\u51b5\u4e0b\u3002\u9700\u6ce8\u610f\u4f7f\u7528\u8be5\u503c\u56fe\u7247\u53ef\u80fd\u6709\u626d\u66f2\u3002<\/p>\n<div class=\"zxx_code\">\n<pre>div { background-size: cover; }<\/pre>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_213004.png\" width=\"375\" height=\"360\" \/><\/p>\n<p><code>background-size<\/code>\u517c\u5bb9\u6027\u5982\u4e0b\u8868\uff1a<\/p>\n<table width=\"500\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\" class=\"params_table\">\n<tr>\n<th scope=\"col\">\u6d4f\u89c8\u5668<\/th>\n<th scope=\"col\">background-size<\/th>\n<\/tr>\n<tr>\n<td>Firefox 3.6, Firefox 4<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Safari 4, Safari 5<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Chrome 10<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>IE6, IE7, IE8<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>IE9<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Opera 10, Opera 11<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<\/table>\n<h3>\u5c5e\u6027\u7684\u7f29\u5199<\/h3>\n<p>\u6709\u4e9bCSS\u5c5e\u6027\u53ef\u4ee5\u8ba9\u6211\u4eec\u5408\u5e76\u4e66\u5199\uff0c\u8fd9\u6837\u5c31\u4e0d\u7528\u592a\u591a\u884c\u7684\u58f0\u660e\u3002\u800c<code>background<\/code>\u5c5e\u6027\u5141\u8bb8\u6211\u4eec\u4f7f\u7528\u4e00\u6761\u89c4\u5219\u8bbe\u7f6e\u6240\u6709\u5355\u72ec\u7684\u80cc\u666f\u5c5e\u6027\u3002CSS2.1\u4e2d\u89e3\u6790\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_213808.png\" width=\"578\" height=\"258\" \/><\/p>\n<p>CSS3\u4e2d\u89e3\u6790\u4e3a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_213920.png\" width=\"584\" height=\"312\" \/><\/p>\n<p><strong>\u7406\u89e3\u521d\u59cb\u503c<\/strong><\/p>\n<p>\u5982\u679c\u4f60\u60f3\u4f7f\u7528\u7f29\u5199\u5c5e\u6027\uff0c\u4f60\u9700\u8981\u7406\u89e3\u77e5\u9053\u521d\u59cb\u503c\u3002\u56e0\u4e3a\u8fd9\u4e9b\u503c\u6709\u4e9b\u53ef\u4ee5\u5e94\u7528\uff0c\u800c\u6709\u4e9b\u53ef\u4ee5\u5f53\u505a\u6253\u9171\u6cb9\u7684\u3002\u5f53\u6211\u4eec\u4f7f\u7528\u4e00\u4e2a\u7f29\u5199\u7684\u65f6\u5019\uff0c\u6ca1\u6709\u5fc5\u8981\u5b9a\u4e49\u6240\u6709\u7684<code>background<\/code>\u5c5e\u6027\uff0c\u4f8b\u5982\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_214347.png\" width=\"578\" height=\"133\" \/><\/p>\n<p>\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u6dfb\u52a0\u6211\u4eec\u5b9e\u9645\u4e0a\u4e0d\u9700\u8981\u7684\u521d\u59cb\u503c\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_215136.png\" width=\"578\" height=\"191\" \/><\/p>\n<p>\u5177\u4f53\u8fd9\u4e9b\u521d\u59cb\u503c\u53c2\u89c1\u4e0b\u8868\uff1a<\/p>\n<table width=\"500\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\" class=\"params_table\">\n<tr>\n<td>background-color<\/td>\n<td>transparent<\/td>\n<\/tr>\n<tr>\n<td>background-image<\/td>\n<td>none<\/td>\n<\/tr>\n<tr>\n<td>background-repeat<\/td>\n<td>repeat<\/td>\n<\/tr>\n<tr>\n<td>background-attachment<\/td>\n<td>scroll<\/td>\n<\/tr>\n<tr>\n<td>background-position<\/td>\n<td>0% 0%<\/td>\n<\/tr>\n<tr>\n<td>background-origin<\/td>\n<td>padding-box<\/td>\n<\/tr>\n<tr>\n<td>background-clip<\/td>\n<td>border-box<\/td>\n<\/tr>\n<tr>\n<td>background-size<\/td>\n<td>auto<\/td>\n<\/tr>\n<\/table>\n<p>\u5f53\u6211\u4eec\u5bf9\u540c\u4e00\u4e2a\u5143\u7d20\u5e94\u7528\u4e24\u4e2a<code>background<\/code>\u89c4\u5219\u7684\u65f6\u5019\u4f1a\u53d1\u73b0\u6709\u4e00\u4e2a\u662f\u4e0d\u8d77\u4f5c\u7528\u7684\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_220108.png\" width=\"578\" height=\"152\" \/><\/p>\n<p>\u539f\u56e0\u89c1\u4e0b\u56fe\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_220338.png\" width=\"578\" height=\"411\" \/><\/p>\n<p>\u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u8c08\u8bba\u6700\u6fc0\u52a8\u4eba\u5fc3\u7684<code>CSS3 backgrounds<\/code>\u90e8\u5206<\/p>\n<h3>\u591a\u80cc\u666f(Multiple backgrounds)<\/h3>\n<p>\u5728CSS2.1\u4e2d\uff0c\u4efb\u4f55HTML\u5143\u7d20\u53ea\u80fd\u6dfb\u52a0\u4e00\u5f20\u80cc\u666f\u56fe\u7247\uff0c\u7136\u800c\uff0c\u5728CSS3\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u7ed9\u4efb\u610f\u5143\u7d20\u6dfb\u52a0N\u5f20\u80cc\u666f\u56fe\u7247\uff0c\u5173\u4e8e\u8be5\u7279\u6027\u7684\u57fa\u7840\u77e5\u8bc6\u53ca\u6548\u679cdemo\u53ef\u4ee5\u53c2\u89c1<a href=\"http:\/\/www.zhangxinxu.com\/css3\/css3-multiple-backgrounds.php\" class=\"a_link\" target=\"_blank\">\u8fd9\u91cc<\/a>\u3002\u8be5\u7279\u6027\u517c\u5bb9\u6027\u5982\u4e0b\u8868\uff1a<\/p>\n<table width=\"500\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\" class=\"params_table\">\n<tr>\n<th scope=\"col\">\u6d4f\u89c8\u5668<\/th>\n<th scope=\"col\">Multiple backgrounds<\/th>\n<\/tr>\n<tr>\n<td>Firefox 3.6, Firefox 4<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Safari 4, Safari 5<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Chrome 10<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>IE6, IE7, IE8<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/error.gif\" title=\"\u4e0d\u652f\u6301\" alt=\"\u4e0d\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>IE9<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<tr>\n<td>Opera 10, Opera 11<\/td>\n<td align=\"center\"><img decoding=\"async\" src=\"http:\/\/www.zhangxinxu.com\/study\/image\/ok.gif\" title=\"\u652f\u6301\" alt=\"\u652f\u6301\" \/><\/td>\n<\/tr>\n<\/table>\n<p><strong>\u4e00\u822c\u5199\u6cd5<\/strong><\/p>\n<p>CSS3\u5141\u8bb8\u6211\u4eec\u7ed9\u4efb\u610f\u7684<code>background<\/code>\u5c5e\u6027\u6dfb\u52a0\u591a\u4e2a\u4ee5\u9017\u53f7\u5206\u9694\u7684\u5c5e\u6027\u503c\uff0c\u5982\u4e0b\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_221516.png\" width=\"578\" height=\"198\" \/><\/div>\n<p>\u4e0b\u9762\u663e\u793a\u7684\u662f\u4e09\u5f20\u80cc\u666f\u56fe\u66f4\u5177\u4f53\u7684\u4f8b\u5b50\uff1a<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_222055.png\" width=\"588\" height=\"227\" \/><\/div>\n<p>\u6bcf\u4e2a\u56fe\u7247\u7684\u5927\u5c0f\uff0c\u5b9a\u4f4d\uff0c\u5e73\u94fa\u90fd\u662f\u6839\u636e\u5176\u4ed6\u80cc\u666f\u5c5e\u6027\u60f3\u5bf9\u5e94\u7684\u503c\u3002\u5982\u679c\u9017\u53f7\u5206\u9694\u7684\u503c\u6bd4\u80cc\u666f\u56fe\u7247\u5c42\u8981\u5c11\uff0c\u6d4f\u89c8\u5668\u4f1a\u62ff\u4f7f\u7528\u8fc7\u7684\u5217\u8868\u4e2d\u7684\u503c\u6765\u5145\u6570\u6765\u4f7f\u5206\u9694\u7684\u503c\u6570\u76ee\u8db3\u591f\u3002\u80cc\u666f\u56fe\u7247\u4ee5\u5c42\u7684\u5f62\u5f0f\u663e\u793a &#8211; \u7b2c\u4e00\u4e2a\u5728\u5176\u4ed6\u4e4b\u4e0a\u3002\u5217\u8868\u4e2d\u7684\u7b2c\u4e00\u4e2a\u56fe\u7247\u662f\u79bb\u7528\u6237\u6700\u8fd1\u7684\uff0c\u800c\u4e0b\u4e00\u4e2a\u56fe\u7247\u4f1a\u88ab\u6e32\u67d3\u5230\u7b2c\u4e00\u4e2a\u4e4b\u540e\uff0c\u4ee5\u6b64\u7c7b\u63a8\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_223432.png\" width=\"320\" height=\"352\" \/><\/p>\n<p>\u6240\u6709\u7684\u5143\u7d20\u53ea\u80fd\u5b9a\u4e49\u4e00\u4e2a\u80cc\u666f\u989c\u8272\uff0c<code>background-color<\/code>\u6240\u5728\u7684\u5c42\u88ab\u8d4b\u4e88\u4e3a\u6700\u5e95\u5c42\uff0c\u79f0\u4e4b\u4e3a\u201c\u7ec8\u6781\u5c42(final layer)\u201d\u3002<code>background-color<\/code>\u5c42\u5728\u6240\u6709\u7684<code>background-image<\/code>\u5c42\u4e4b\u4e0b\u3002<\/p>\n<p><strong>\u7f29\u5199<\/strong><\/p>\n<p>\u6240\u6709\u7684\u8fd9\u4e9b\u80cc\u666f\u5c5e\u6027\u90fd\u53ef\u4ee5\u5408\u5e76\u6210\u5355\u72ec\u7684\u4e00\u884c\u7f29\u5199\u3002\u591a\u80cc\u666f\u56fe\u7684\u7f29\u5199\u89c4\u5219\u4e0e\u5355\u80cc\u666f\u56fe\u662f\u4e00\u81f4\u7684\uff0c\u7136\u540e\u4e2d\u95f4\u7528\u9017\u53f7\u9694\u5f00\u3002\u5982\u4e0b\u4ee3\u7801\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>p {\n\tbackground: \n        <span style=\"color:red;\">url (01.gif) no-repeat,<\/span>    <span style=\"color:green;\">\/*\u56fe\u72471*\/<\/span>\n        <span style=\"color:#084783;\">url (02.gif) repeat left bottom,<\/span><\/span>    <span style=\"color:green;\">\/*\u56fe\u72472*\/<\/span>\n        <span style=\"color:#085144;\">url (03.gif) repeat-y 10px 5px<\/span><\/span>    <span style=\"color:green;\">\/*\u56fe\u72473*\/<\/span>\n}<\/pre>\n<\/div>\n<p>\u4e0e\u4e00\u822c\u5199\u6cd5\u4e2d\u4e00\u6837\uff0c\u6bcf\u4e2a\u80cc\u666f\u56fe\u7247\u90fd\u662f\u4ee5\u5c42\u7684\u5f62\u5f0f\u663e\u793a\uff0c\u7b2c\u4e00\u4e2a\u5728\u5176\u4ed6\u4e4b\u4e0a\u3002<\/p>\n<h3>background-color\u548cMultiple backgrounds<\/h3>\n<p>\u53ea\u6709\u6700\u5e95\u5c42\uff0c\u5373\u6240\u8c13\u7684\u201c\u7ec8\u6781\u5c42\u201d\u53ef\u4ee5\u8bbe\u7f6e<code>background-color<\/code>\uff0c<code>background-color<\/code>\u53ea\u6709\u8bbe\u7f6e\u5728\u201c\u7ec8\u6781\u5c42\u201d\u4e0a\u624d\u80fd\u5728\u8ba9\u6240\u6709\u80cc\u666f\u56fe\u663e\u793a\u3002\u5982\u679c<code>background-color<\/code>\u503c\u88ab\u6dfb\u52a0\u5230\u5176\u4ed6\u6742\u4e03\u6742\u516b\u7684\u5c42\uff08\u4e0d\u662f\u201c\u7ec8\u6781\u5c42\u201d\uff09\u4e0a\uff0c\u90a3\u4e48\u6574\u4e2a\u89c4\u5219\u5c06\u4e0d\u4f1a\u663e\u793a\u3002<code>background-color<\/code>\u53ea\u80fd\u5e94\u7528\u5728\u7ec8\u6781\u5c42\u4e0a\uff0c\u5982\u4e0b\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_225815.png\" width=\"588\" height=\"206\" \/><\/p>\n<p>\u6dfb\u52a0\u80cc\u666f\u989c\u8272\u6bd4\u8f83\u5b89\u5168\u7684\u505a\u6cd5\u662f\u4f7f\u7528\u72ec\u7acb\u7684<code>background-color<\/code>\u58f0\u660e\uff0c\u5982\u4e0b\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_230126.png\" width=\"588\" height=\"211\" \/><\/p>\n<h3>\u5173\u4e8e\u4e00\u4e9b\u590d\u6742\u7f29\u5199<\/h3>\n<p>\u5982\u679c\u4f60\u60f3\u4e66\u5199\u66f4\u4e3a\u590d\u6742\u7684\u7f29\u5199\uff0c\u4f60\u9700\u8981\u6ce8\u610f\u4e00\u4e9b\u6d4f\u89c8\u5668\u7684\u602a\u7656\u3002<span class=\"s\">\/\/zxx:\u8df3\u8fc7\u4e00\u4e9b\u7406\u8bba\u4e0b\u5168\u90e8\u6b63\u786e\u7684\u5c5e\u6027\u7f29\u5199\u56fe\uff0c\u76f4\u63a5\u5c55\u793a\u63d0\u51fa\u95ee\u9898\u7684\u90a3\u5f20\u56fe<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_231048.png\" width=\"583\" height=\"275\" \/><\/p>\n<p>\u5982\u679c\u5b8c\u6574\u6309\u7167\u4e0a\u56fe\u7684\u5199\u6cd5\uff0c\u5728Safari 5, Firefox 4, Chrome 10\u4e0b\u4f1a\u6709\u4e24\u4e2a\u95ee\u9898\u3002\u4e00\u662f\u8fd9\u4e9b\u6d4f\u89c8\u5668\u4e0d\u8ba4\u8bc6\u7f29\u5199\u89c4\u5219\u4e2d\u524d\u659c\u6760\uff0c\u5982\u679c\u6709\u8fd9\u73a9\u610f\uff0c\u8fd9\u4e9b\u6d4f\u89c8\u5668\u4f1a\u76f4\u63a5\u5ffd\u89c6\u6574\u4e2a\u58f0\u660e\uff1b\u800c\u662f\u8fd9\u4e9b\u6d4f\u89c8\u5668\u4e0d\u8ba4\u8bc6\u7f29\u5199\u89c4\u5219\u4e2d\u4e24\u4e2a\u76d2\u5b50\u503c(<code>origin<\/code>\u548c<code>clip<\/code>)\u7684\u4f7f\u7528\uff0c\u5982\u679c\u6709\u8fd9\u73a9\u610f\uff0c\u8fd9\u4e9b\u6d4f\u89c8\u5668\u4f1a\u76f4\u63a5\u5ffd\u89c6\u6574\u4e2a\u58f0\u660e\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u5c31\u76ee\u524d\u800c\u8a00\uff0c\u7f29\u5199\u6700\u597d\u7528\u5728\u4e0d\u592a\u590d\u6742\u7684\u58f0\u660e\u4e0a\u3002\u4f46\u662f\u5982\u679c\u4f60\u60f3\u5305\u542b\u5168\u90e8\u76847\u4e2a\u5c5e\u6027\uff0c\u8fd8\u662f\u4f7f\u7528\u4e00\u822c\u5199\u6cd5\u4ee3\u66ff\u4e3a\u5999\u3002<\/p>\n<h3>Multiple backgrounds\u548c\u6e10\u53d8<\/h3>\n<p>\u8981\u6709\u8fd9\u79cd\u610f\u8bc6\uff1a\u6e10\u53d8\u662f\u4e00\u79cd\u4ee3\u7801\u751f\u6210\u7684\u56fe\u7247\u3002\u4ed6\u4eec\u53ef\u4ee5\u4f7f\u7528<code>url()<\/code>\u503c\u6765\u4ee3\u66ff\u3002\u8fd9\u5c31\u610f\u5473\u7740\u4f60\u53ef\u4ee5\u5728\u591a\u80cc\u666f\u4e2d\u4f7f\u7528\u6e10\u53d8\uff0c\u4f8b\u5982\u4e0b\u9762\u5c55\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_232336.png\" width=\"585\" height=\"214\" \/><\/p>\n<h3>Multiple backgrounds\u548c\u6307\u5b9a\u524d\u7f00\u6269\u5c55<\/h3>\n<p>\u5982\u679c\u4f60\u5728\u591a\u80cc\u666f\u4e2d\u6dfb\u52a0\u524d\u7f00\u5c5e\u6027\u4f1a\u600e\u6837\u7684\uff1f\u6d4f\u89c8\u5668\u4f1a\u65e0\u89c6\u5176\u4e0d\u8ba4\u8bc6\u7684CSS\uff0c\u56e0\u800c\uff0c\u8fd9\u91cc\u6574\u884c\u58f0\u660e\u90fd\u4e0d\u8d77\u4f5c\u7528\u3002\u79c1\u6709\u7684\u524d\u7f00\u5c5e\u6027\u53ea\u80fd\u88ab\u7279\u5b9a\u7684\u6d4f\u89c8\u5668\u8bc6\u522b\uff0c\u6211\u4eec\u4e0d\u80fd\u518d\u540c\u4e00\u4e2a\u58f0\u660e\u4e2d\u6dfb\u52a0\u6d4f\u89c8\u5668\u79c1\u6709\u524d\u7f00\uff0c\u56e0\u4e3a\u6d4f\u89c8\u5668\u4f1a\u5ffd\u89c6\u6574\u4e2a\u58f0\u660e\uff0c\u8fd9\u5c31\u610f\u5473\u7740\u6211\u4eec\u4e0d\u5f97\u4e0d\u4e3a\u6bcf\u4e2a\u7279\u5b9a\u7684\u524d\u7f00\u5c5e\u6027\u5199\u4e2a<code>background<\/code>\u5c5e\u6027\u3002\u6240\u6709\u5176\u4ed6\u7684\u80cc\u666f\u56fe\u7247\u90fd\u5fc5\u987b\u5305\u542b\u5728\u6bcf\u4e00\u4e2a\u58f0\u660e\u4e2d\u3002\u4f8b\u5982\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/2011-05-08_233204.png\" width=\"588\" height=\"299\" \/><\/p>\n<p>\u539f\u4f5c\u8005\uff1a<a href=\"twitter.com\/russ\">Russ Weakley<\/a><br \/>\u7ffb\u8bd1\u7f16\u8f91\uff1a<a href=\"\/\/www.zhangxinxu.com\/\">\u5f20\u946b\u65ed<\/a><\/p>\n<h3>\u4e0d\u5c5e\u4e8e\u7ffb\u8bd1\u5185\u5bb9\u7684\u7ed3\u8bed<\/h3>\n<p>\u6587\u4e2d\u4e00\u4e9b\u91cd\u590d\u7684\u56fe\u7247\u5df2\u7701\u6389\u4e86\uff0c\u56fe\u6587\u5747\u6709\u7f16\u8f91\u3002\u65f6\u95f4\u4ed3\u4fc3\uff0c\u8d44\u5386\u6709\u9650\uff0c\u6587\u4e2d\u96be\u514d\u4f1a\u6709\u7ffb\u8bd1\u6216\u8868\u8ff0\u4e0d\u51c6\u786e\u7684\u5730\u65b9\uff0c\u6b22\u8fce\u6307\u6b63\uff0c\u6b22\u8fce\u4ea4\u6d41\u3002<\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u6765\u81ea<a href=\"http:\/\/www.zhangxinxu.com\/\">\u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b<\/a>[<a href=\"http:\/\/www.zhangxinxu.com\/\">http:\/\/www.zhangxinxu.com<\/a>]<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=1618\">http:\/\/www.zhangxinxu.com\/wordpress\/?p=1618<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=1618\"><img loading=\"lazy\" decoding=\"async\" class=\"imgpad mb10\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201105\/css3-backgrounds.jpg\" width=\"550\" height=\"170\" title=\"\u70b9\u51fb\u67e5\u770b\u672c\u6587\" \/><\/a><br \/>\n\u5c31\u4e0a\u5468\u5427\uff0c\u51fa\u4e86\u4e2a\u5173\u4e8eCSS3 Backgrounds\u7684\u8bfe\u4ef6\uff0c\u4e2a\u4eba\u89c9\u5f97\u5bf9\u4e8e\u5b66\u4e60\u5f88\u6709\u5e2e\u52a9\uff0c\u4e8e\u662f\u51b3\u5b9a\u7ffb\u8bd1\u4e0b\uff0c\u4e0d\u8fc7\u4f5c\u8005\u4f3c\u4e4e\u5c06\u4e0b\u8f7d\u529f\u80fd\u5173\u95ed\u4e86\uff0c\u4e8e\u662f\u4e0d\u80fd\u518d\u539fpdf\u6587\u4ef6\u4e0a\u4fee\u6539\uff0c\u4e0d\u5f97\u5df2\uff0c\u81ea\u5df1\u5c31\u6574\u4e86\u4e2a\u957f\u957f\u7684HTML\u7248\u672c\u7684\uff0c\u4e5f\u5373\u662f\u672c\u6587\u7684\u4e3b\u8981\u5185\u5bb9\u4e86\u3002\u672c\u6587\u622a\u56fe\u8d85\u591a\uff0c\u4f46\u662f\u6ca1\u6709demo\u9875\u9762\uff0c\u56fe\u6587\u5e76\u8302\uff0c\u76f8\u4fe1\u80fd\u591f\u5bf9\u60a8\u7684\u5b66\u4e60\u4f1a\u6709\u6240\u5e2e\u52a9\u7684\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,198],"tags":[163,598,597,563,595,594,177,596,593,592],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/1618"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1618"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/1618\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}