{"id":9618,"date":"2020-10-24T20:03:17","date_gmt":"2020-10-24T12:03:17","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9618"},"modified":"2022-09-15T21:41:30","modified_gmt":"2022-09-15T13:41:30","slug":"css-style-image-load-fail","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2020\/10\/css-style-image-load-fail\/","title":{"rendered":"\u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u540eCSS\u6837\u5f0f\u5904\u7406\u6700\u4f73\u5b9e\u8df5"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9618\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=9618<\/a><br \/>\n\u672c\u6587\u6b22\u8fce\u5206\u4eab\u4e0e\u805a\u5408\uff0c\u5168\u6587\u8f6c\u8f7d\u5c31\u4e0d\u5fc5\u4e86\uff0c\u5c0a\u91cd\u7248\u6743\uff0c\u5708\u5b50\u5c31\u8fd9\u4e48\u5927\uff0c\u82e5\u6025\u7528\u53ef\u4ee5\u8054\u7cfb\u6388\u6743\u3002<\/p>\n<p><script>window.wxShareImgUrl = 'https:\/\/www.zhangxinxu.com\/study\/image\/share\/202010-img-break.png';<\/script><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/rabbit-cute-cover.png\" width=\"480\" height=\"300\" alt=\"\u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u6700\u4f73\u5b9e\u8df5\u5c01\u9762\u56fe\" class=\"alignright clip thumb size-medium\" \/><\/p>\n<h3>\u4e00\u3001\u4f20\u7edf\u7684\u56fe\u7247\u5f02\u5e38\u5904\u7406<\/h3>\n<p><code>&lt;img&gt;<\/code>\u5982\u679c\u56e0\u4e3a\u7f51\u7edc\u6216\u8005\u8de8\u57df\u9650\u5236\u7b49\u539f\u56e0\u65e0\u6cd5\u6b63\u5e38\u52a0\u8f7d\uff0c\u5728\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u4f1a\u663e\u793a\u6d4f\u89c8\u5668\u9ed8\u8ba4\u7684\u201c\u88c2\u5f00\u201d\u7684\u56fe\u7247\u6548\u679c\uff0c\u5982\u679c\u8bbe\u7f6e\u4e86<code>alt<\/code>\u5c5e\u6027\u503c\uff0c\u5219<code>alt<\/code>\u5c5e\u6027\u5bf9\u5e94\u7684\u5185\u5bb9\u4e5f\u4f1a\u4e00\u5e76\u663e\u793a\u3002\u4f8b\u5982\uff1a<\/p>\n<pre>&lt;img src=\"\/\/www.zhangxinxu.com\/zxx.ico\" alt=\"\u946b\u7a7a\u95f4\u946b\u751f\u6d3b\"&gt;<\/pre>\n<p>\u4f8b\u5982Chrome\u6d4f\u89c8\u5668\u4e0b\u7684\u6548\u679c\u622a\u56fe\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/2020-10-24_155510.png\" width=\"141\" height=\"55\" alt=\"Chrome\u6d4f\u89c8\u5668\u56fe\u7247\u52a0\u8f7d\u5f02\u5e38\u6548\u679c\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u53ef\u4ee5\u770b\u5230\u56fe\u7247\u52a0\u8f7d\u5f02\u5e38\u4e4b\u540e\u7684\u89c6\u89c9\u6548\u679c\u5b9e\u5728\u662f\u592a\u7c97\u7cd9\u4e86\uff0c\u7a0b\u5e8f\u5458\u53ef\u5fcd\u8bbe\u8ba1\u5e08\u4e0d\u53ef\u5fcd\uff0c\u56e0\u6b64\uff0c\u4e3a\u4e86\u66f4\u597d\u7684\u89c6\u89c9\u6548\u679c\uff0c\u5b9e\u9645\u9879\u76ee\u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u603b\u4f1a\u5bf9\u56fe\u7247\u52a0\u8f7d\u5f02\u5e38\u7684\u8fb9\u754c\u573a\u666f\u8fdb\u884c\u989d\u5916\u7684\u5904\u7406\u3002<\/p>\n<p>\u4f20\u7edf\u7684\u56fe\u7247\u52a0\u8f7d\u5f02\u5e38\u4f1a\u4f7f\u7528\u4e00\u4e2a\u52a0\u8f7d\u5931\u8d25\u7684\u5360\u4f4d\u7b26\u4ee3\u66ff\uff0c\u8fd9\u4e2a\u5360\u4f4d\u56fe\u901a\u5e38\u4f1a\u662f\u4e00\u5f20\u88c2\u5f00\u7684\u56fe\u7247\u3002<\/p>\n<p>\u4f8b\u5982\u4e0b\u9762\u8fd9\u5f20\u56fe\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/imgservices-1252317822.image.myqcloud.com\/image\/20201015\/45prvdakqe.svg\" width=\"200\" height=\"200\"><\/p>\n<p>\u89e6\u53d1\u4f7f\u7528\u5360\u4f4d\u56fe\u53ef\u4ee5\u901a\u8fc7<code>onerror<\/code>\u4e8b\u4ef6\uff0c\u4ee3\u7801\u793a\u610f\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;img src=\"xxx.png\" alt=\"\u946b\u7a7a\u95f4\u946b\u751f\u6d3b\" onerror=\"this.src='break.svg';\"&gt;<\/pre>\n<p>\u914d\u5408CSS\uff1a<\/p>\n<pre>img[src$=\"break.svg\"] {\r\n    object-fit: contain;\r\n}<\/pre>\n<p>\u5c31\u53ef\u4ee5\u4fdd\u8bc1\u5360\u4f4d\u56fe\u7684\u6a2a\u5bbd\u6bd4\u4f8b\u662f\u6b63\u5e38\u7684\u3002<\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202010\/image-error-replace-demo.php\" rel=\"noopener\" target=\"_blank\">\u56fe\u7247\u52a0\u8f7d\u5f02\u5e38\u5360\u4f4d\u56fe\u7247\u5904\u7406demo<\/a><\/p>\n<p>\u5176\u4e2d\u7b2c2\u5f20\u56fe\u7247\u6545\u610f\u4f7f\u7528\u4e86\u4e00\u4e2a\u9519\u8bef\u7684\u5730\u5740\uff0c\u7ed3\u679c\u5982\u4e0b\u622a\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/2020-10-24_182844.png\" width=\"470\" height=\"193\" alt=\"\u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u5360\u4f4d\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u7136\u800c\u4e0a\u9762\u8fd9\u79cd\u5b9e\u73b0\u65b9\u5f0f\u6709\u4e00\u4e2a\u6bd4\u8f83\u81f4\u547d\u7684\u95ee\u9898\uff0c\u90a3\u5c31\u662f\u7528\u6237\u5e76\u4e0d\u6e05\u695a\u65e0\u6cd5\u663e\u793a\u7684\u56fe\u7247\u5177\u4f53\u8868\u793a\u7684\u542b\u4e49\u662f\u4ec0\u4e48\u3002<\/p>\n<p>\u5bf9\u4e8e\u7528\u6237\u800c\u8a00\uff0c\u5185\u5bb9\u548c\u529f\u80fd\u7edd\u5bf9\u6bd4\u89c6\u89c9\u8868\u73b0\u66f4\u91cd\u8981\u3002<\/p>\n<p>\u539f\u751f\u7684\u56fe\u7247\u51fa\u9519\u4f1a\u663e\u793a\u56fe\u7247\u7684alt\u4fe1\u606f\uff0c\u8fd9\u6837\uff0c\u7528\u6237\u662f\u80fd\u591f\u77e5\u9053\u56fe\u7247\u63cf\u8ff0\u7684\u5185\u5bb9\u662f\u4ec0\u4e48\uff0c\u800c\u8fd9\u91cc\u4f7f\u7528\u5360\u4f4d\u56fe\u7247\u515c\u5e95\u5904\u7406\u540e\uff0c\u8fd9\u4e9b\u4fe1\u606f\u90fd\u6ca1\u6709\u4e86\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u4f20\u7edf\u7684\u56fe\u7247\u51fa\u9519\u7684\u5904\u7406\u65b9\u6cd5\u53ef\u4ee5\u6709\u8fdb\u4e00\u6b65\u7684\u4f18\u5316\u3002<\/p>\n<p><span class=\"hidden\">\/\/zxx: \u5982\u679c\u4f60\u770b\u5230\u8fd9\u6bb5\u6587\u5b57\uff0c\u8bf4\u660e\u4f60\u73b0\u5728\u8bbf\u95ee\u662f\u4f53\u9a8c\u7cdf\u7cd5\u7684\u5783\u573e\u76d7\u7248\u7f51\u7ad9\uff0c\u4f60\u53ef\u4ee5\u8bbf\u95ee\u539f\u6587\u83b7\u5f97\u5f88\u597d\u7684\u4f53\u9a8c\uff1ahttps:\/\/www.zhangxinxu.com\/wordpress\/?p=9618\uff08\u4f5c\u8005\u5f20\u946b\u65ed\uff09<\/span><\/p>\n<h3>\u4e8c\u3001\u6700\u4f73\u5b9e\u8df5\uff0c\u540c\u65f6\u663e\u793aalt\u4fe1\u606f<\/h3>\n<p>\u4e3a\u4e86\u4fbf\u4e8e\u7ef4\u62a4\uff0c\u56fe\u50cf\u52a0\u8f7derror\u7684\u65f6\u5019\u4e0d\u518d\u662f\u66ff\u6362src\u5730\u5740\uff0c\u800c\u662f\u65b0\u589e\u4e00\u4e2a\u9519\u8bef\u7c7b\u540d\uff0c\u4f8b\u5982<code>.error<\/code>\uff08<strong style=\"color:#cd0000;\">\u6ce8\u610f\uff0c\u8fd9\u4e2a\u7c7b\u540d\u662f\u975e\u5fc5\u987b\u7684<\/strong>\uff09\uff1a<\/p>\n<pre>&lt;img src=\"zxx.png\" alt=\"CSS\u65b0\u4e16\u754c\u5c01\u9762\" onerror=\"this.classList.add('error');\"&gt;<\/pre>\n<p>\u7136\u540e\u914d\u5408\u4f7f\u7528\u5982\u4e0b\u6240\u793a\u7684CSS\uff08\u90e8\u5206CSS\u6837\u5f0f\u7ec6\u8282\u5927\u5bb6\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u5ba1\u7f8e\u8fdb\u884c\u4fee\u6539\uff09\uff08<code>.error<\/code>\u7c7b\u540d\u53ef\u4ee5\u7701\u7565\uff09\uff1a<\/p>\n<pre>img.error {\r\n  display: inline-block;\r\n  transform: scale(1);\r\n}\r\nimg.error::before {\r\n  content: '';\r\n  position: absolute;\r\n  left: 0; top: 0;\r\n  width: 100%; height: 100%;\r\n  background: #f5f5f5 url(break.svg) no-repeat center \/ 50% 50%;\r\n  color: transparent;\r\n}\r\nimg.error::after {\r\n  content: attr(alt);\r\n  position: absolute;\r\n  left: 0; bottom: 0;\r\n  width: 100%;\r\n  line-height: 2;\r\n  background-color: rgba(0,0,0,.5);\r\n  color: white;\r\n  font-size: 12px;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}<\/pre>\n<p>\u6b64\u65f6\u5c31\u53ef\u4ee5\u770b\u5230\u5931\u8d25\u7684\u56fe\u7247\u548calt\u6587\u5b57\u4fe1\u606f\u540c\u65f6\u51fa\u73b0\u7684\u6548\u679c\u4e86\u3002<\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202010\/image-error-show-alt-demo.php\" rel=\"noopener\" target=\"_blank\">\u56fe\u7247\u52a0\u8f7d\u5f02\u5e38\u540c\u65f6\u663e\u793aalt\u4fe1\u606fdemo<\/a><\/p>\n<p>\u5bf9\u5e94\u7684\u663e\u793a\u6548\u679c\u53c2\u89c1\u4e0b\u9762\u7684\u622a\u56fe\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/2020-10-24_192441.png\" width=\"476\" height=\"231\" alt=\"\u56fe\u50cf\u5931\u8d25\u548calt\u4fe1\u606f\u540c\u65f6\u51fa\u73b0\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u53ef\u4ee5\u770b\u5230\uff0c\u5185\u5bb9\u5c55\u793a\u548c\u89c6\u89c9\u8868\u73b0\u540c\u65f6\u517c\u987e\u4e86\uff0c\u662f\u6211\u8fd9\u4e9b\u5e74\u6253\u78e8\u51fa\u6765\u7684\u76ee\u524d\u6700\u597d\u7684\u56fe\u50cf\u52a0\u8f7d\u5f02\u5e38\u515c\u5e95\u5904\u7406\u5b9e\u8df5\uff0c\u4e00\u6bb5\u4ee3\u7801\u6574\u7ad9\u901a\u7528\uff0c\u4f4e\u6210\u672c\u9ad8\u6536\u76ca\u3002<\/p>\n<h4>\u517c\u5bb9\u6027<\/h4>\n<p>\u66ff\u6362\u5143\u7d20\u652f\u6301<code>::before<\/code>, <code>::after<\/code>\u4f2a\u5143\u7d20\u4e5f\u662f\u6700\u8fd1\u51e0\u5e74\u6d4f\u89c8\u5668\u624d\u652f\u6301\u7684\uff0cChrome\u652f\u6301\u7684\u6bd4\u8f83\u65e9\uff0c\u5e94\u8be53-5\u5e74\u6709\u7684\uff0cFirefox\u6d4f\u89c8\u5668\u662f\u6700\u8fd1\u51e0\u5e74\u652f\u6301\u7684\u3002<\/p>\n<p>\u4e5f\u5c31\u662f\u4e0d\u4ec5<code>&lt;img&gt;<\/code>\u5143\u7d20\u53ef\u4ee5\u4f7f\u7528<code>::before<\/code>, <code>::after<\/code>\u4f2a\u5143\u7d20\u521b\u5efa\u65b0\u7684UI\uff0c<code>&lt;input&gt;<\/code>\u5143\u7d20\uff08\u4f8b\u5982\u5355\u9009\u6846\u3001\u590d\u9009\u6846\uff09\u4e5f\u662f\u53ef\u4ee5\u4f7f\u7528\u4f2a\u5143\u7d20\u521b\u5efa\u989d\u5916\u7684UI\u6548\u679c\u7684\u3002<\/p>\n<p>\u8fd9\u4e2a\u7279\u6027\u5728\u6837\u5f0f\u8868\u73b0\u8fd9\u5757\u7ed9\u6211\u4eec\u5e26\u6765\u7684\u5f88\u5927\u7684\u4fbf\u6377\uff0c\u7136\u540e\u6709\u4e00\u4e2a\u5c0f\u5c0f\u7684\u95ee\u9898\uff0c\u90a3\u5c31\u662fIE\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\uff0c\u53ea\u6709\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e0b\u624d\u6709\u6548\u679c\uff08Chrome\u3001Firefox\u4ee5\u53caSafari\u6d4f\u89c8\u5668\u5747\u6709\u6548\u679c\uff09\u3002<\/p>\n<p>\u4e0d\u8fc7\u8fd9\u4e2a\u517c\u5bb9\u6027\u95ee\u9898\u5bf9\u6211\u4eec\u5e94\u7528\u8be5\u6280\u672f\u6ca1\u6709\u4efb\u4f55\u5f71\u54cd\uff0c\u539f\u56e0\u5f88\u7b80\u5355\uff0c\u4f8b\u5982\u672c\u6587\u6240\u4ecb\u7ecd\u7684\u56fe\u7247\u5f02\u5e38\u5904\u7406\u5c5e\u4e8e\u6e10\u8fdb\u589e\u5f3a\u7279\u6027\uff0c\u4e5f\u5c31\u662f\u5c31\u7b97\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\uff0c\u4e5f\u5c31\u662f\u56de\u5230\u539f\u672c\u7684\u72b6\u6001\uff0c\u6709\u5219\u66f4\u597d\uff0c\u65e0\u5219\u8001\u6837\u5b50\u3002<\/p>\n<p>\u6bd4\u65b9\u8bf4\u5728Edge\u6d4f\u89c8\u5668\uff08\u975eChrome\u5185\u6838\u7248\u672c\uff09\u4e0b\uff0c\u4e0a\u8ff0demo\u6548\u679c\u5c31\u4f1a\u662f\u4e0b\u9762\u8fd9\u6837\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/2020-10-24_193506.png\" width=\"463\" height=\"209\" alt=\"Edge\u6d4f\u89c8\u5668\u4e0b\u7684\u6548\u679c\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u5e03\u5c40\u826f\u597d\uff0c\u8bed\u4e49\u660e\u786e\uff0c\u5f88OK\u7684\u6548\u679c\u3002<\/p>\n<p>\u6240\u4ee5\uff0c\u672c\u6587\u7684\u6280\u80fd\u5c0ftips\u5927\u53ef\u653e\u5fc3\u4f7f\u7528\u3002<\/p>\n<h3>\u4e09\u3001\u5176\u4ed6\u6ce8\u610f\u70b9\u548c\u7ed3\u8bed<\/h3>\n<p>\u4e0a\u9762\u63d0\u4f9b\u7684CSS\u4ee3\u7801\u4e2d\u7684\u515c\u5e95\u56fe\u50cf\u5747\u4f7f\u7528\u7684\u5916\u94fe\u5730\u5740\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>img.error::before {\r\n  background: #f5f5f5 url(break.svg) no-repeat center \/ 50% 50%;\r\n}<\/pre>\n<p>\u5176\u4e2d\u7684<code>url(break.svg)<\/code>\u5c31\u662f\u4f7f\u7528\u7684\u5916\u94fe\u5730\u5740\u3002<\/p>\n<p>\u7136\u540e\u8fd9\u91cc\u6709\u4e2a\u9700\u8981\u6ce8\u610f\u7684\u5730\u65b9\uff0c\u8fd9\u4e2a<code>break.svg<\/code>\u7684\u57df\u540d\u5730\u5740\u5efa\u8bae\u4e0d\u8981\u548c\u7f51\u7ad9\u7684\u9759\u6001\u56fe\u7247\u7684\u5730\u5740\u4e00\u6837\u3002<\/p>\n<p>\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u9759\u6001\u56fe\u7247\u4f7f\u7528\u7684\u90fd\u662f\u67d0\u67d0\u4e91\uff0c\u6b64\u65f6\uff0c<code>break.svg<\/code>\u5bf9\u5e94\u7684\u5730\u5740\u5c31\u4e0d\u63a8\u8350\u8fd8\u662f\u67d0\u67d0\u4e91\u751f\u6210\u7684\u5730\u5740\u3002\u56e0\u4e3a\u67d0\u67d0\u4e91\u51fa\u73b0\u5f02\u5e38\u5bfc\u81f4\u56fe\u7247\u6302\u6389\u7684\u8bdd\uff0c\u8fd9\u4e2a<code>break.svg<\/code>\u663e\u7136\u4e5f\u662f\u663e\u793a\u4e0d\u51fa\u6765\u7684\uff0c\u5c31\u5b8c\u5168\u8d77\u4e0d\u5230\u515c\u5e95\u548c\u5360\u4f4d\u7684\u4f5c\u7528\u3002<\/p>\n<p>\u56e0\u6b64\uff0c<code>break.svg<\/code>\u53ef\u4ee5\u548c\u4e3b\u7ad9\u57df\u540d\u4e00\u81f4\uff0c\u6216\u8ddfCSS\u57df\u540d\u4e00\u81f4\uff0c\u6216\u8005\u76f4\u63a5\u5185\u8054\u5728CSS\u6587\u4ef6\u4e2d\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>img.error::before {\r\n  background: #f5f5f5 url(\"data:image\/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cpath d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z' fill='%23e6e6e6'\/%3E%3Cpath d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z' fill='%23e6e6e6'\/%3E%3C\/svg%3E\") no-repeat center \/ 50% 50%;\r\n}<\/pre>\n<p>\u597d\uff0c\u4ee5\u4e0a\u5c31\u662f\u672c\u6587\u7684\u5185\u5bb9\uff0c\u76f8\u4fe1\u4e0d\u96be\u7406\u89e3\u3002<\/p>\n<p>\u524d\u7aef\u3001\u57fa\u7840\u3001\u7ec6\u8282\u4e0e\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n<p>\u611f\u8c22\u9605\u8bfb\uff0c\u6b22\u8fce\u5206\u4eab\uff01<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/emtion\/emoji\/2764.svg\" width=\"20\" height=\"20\" align=\"absmiddle\"><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u6b22\u8fce\u5206\u4eab\uff0c\u52ff\u5168\u6587\u8f6c\u8f7d\uff0c\u5982\u679c\u5b9e\u5728\u559c\u6b22\uff0c\u53ef\u6536\u85cf\uff0c\u6c38\u4e0d\u8fc7\u671f\uff0c\u4e14\u4f1a\u53ca\u65f6\u66f4\u65b0\u77e5\u8bc6\u70b9\u53ca\u4fee\u6b63\u9519\u8bef\uff0c\u9605\u8bfb\u4f53\u9a8c\u4e5f\u66f4\u597d\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9618\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=9618<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202010\/rabbit-cute-cover.png\" width=\"160\" height=\"100\" alt=\"\u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u6700\u4f73\u5b9e\u8df5\u5c01\u9762\u56fe\" class=\"alignright size-medium\" loading=\"lazy\" \/><\/p>\n<p>\u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u7684\u9ed8\u8ba4UI\u662f\u6bd4\u8f83\u4e11\u964b\u7684\uff0c\u56e0\u4e3a\u524d\u7aef\u5f00\u53d1\u4f1a\u4f7f\u7528\u51fa\u9519\u56fe\u8fdb\u884c\u66ff\u6362\uff0c\u4f46\u662f\u8fd9\u79cd\u505a\u6cd5\u4f1a\u9690\u85cf\u56fe\u50cf\u7684\u5185\u5bb9\u4fe1\u606f\uff0c\u6709\u6ca1\u6709\u4ec0\u4e48\u529e\u6cd5\u5728CSS\u6837\u5f0f\u7f8e\u5316\u540c\u65f6\u663e\u793a\u56fe\u50cf\u7684\u4fe1\u606f\u5462\uff1f\u672c\u6587\u5c31\u4ecb\u7ecd\u6211\u6478\u7d22\u51fa\u6765\u7684\u5e94\u5bf9\u6b64\u573a\u666f\u7684\u6700\u4f73\u5b9e\u8df5\u6280\u5de7\uff0c\u5e0c\u671b\u53ef\u4ee5\u5bf9\u60a8\u7684\u5de5\u4f5c\u4e0e\u5b66\u4e60\u5e26\u6765\u5e2e\u52a9\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],"tags":[1520,823,355,75,117,178,1530,203,1217],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/9618"}],"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=9618"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/9618\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=9618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=9618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=9618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}