{"id":6513,"date":"2017-11-06T22:32:12","date_gmt":"2017-11-06T14:32:12","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=6513"},"modified":"2020-07-26T00:37:23","modified_gmt":"2020-07-25T16:37:23","slug":"css-css3-mask-masks","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2017\/11\/css-css3-mask-masks\/","title":{"rendered":"\u5ba2\u6808\u8bf4\u4e66\uff1aCSS\u906e\u7f69CSS3 mask\/masks\u8be6\u7ec6\u4ecb\u7ecd"},"content":{"rendered":"<p>by <a href=\"http:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=6513\">http:\/\/www.zhangxinxu.com\/wordpress\/?p=6513<\/a><br \/>\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4f46\u9700\u5f97\u5230\u539f\u4f5c\u8005\u4e66\u9762\u8bb8\u53ef\uff0c\u540c\u65f6\u4fdd\u7559\u539f\u4f5c\u8005\u548c\u51fa\u5904\uff0c\u6458\u8981\u5f15\u6d41\u5219\u968f\u610f\u3002<\/p>\n<p>\u201c\u5ba2\u5b98\uff0c\u6765\u6765\u6765\uff0c\u91cc\u9762\u8bf7\uff0c\u4eca\u5929\u53cc11\uff0c\u4f18\u60e0\u5927\u916c\u5bbe\uff0c\u5403\u996d\u516b\u6298\uff0c\u8fd8\u514d\u8d39\u542c\u4e66\u3002\u201d<br \/>\n\u5f20\u695a\u5c9a\u4e00\u542c\uff0c\u5fc3\u60f3\u8fd9\u8fd8\u633a\u5212\u7b97\u7684\uff0c\u5927\u4e0d\u4e86\u8fdb\u53bb\u70b9\u7897\u9752\u83dc\u9762\uff0c\u7136\u540e\u514d\u8d39\u542c\u573a\u8bf4\u4e66\uff0c\u7a33\u8d5a\u4e0d\u8d54\u5440\uff0c\u679c\u7136\u662f\u8d2b\u7a77\u8ba9\u6211\u53d8\u5f97\u66f4\u6709\u667a\u6167\u3002\u4e8e\u662f\u8d3c\u6e9c\u6e9c\u5730\u8fdb\u5165\u4e86\u540c\u798f\u5ba2\u6808\u3002<\/p>\n<p>\u5ea7\u4f4d\u5c1a\u591a\uff0c\u6216\u8bb8\u662f\u56e0\u4e3a\u51fa\u4e8e\u4e60\u60ef\u6027\uff0c\u5f20\u695a\u5c9a\u627e\u4e86\u4e2a\u9760\u95e8\u7684\u4f4d\u7f6e\u5750\u4e86\u4e0b\u6765\u3002\u521a\u5750\u4e0b\uff0c\u5c0f\u4e8c\u5c31\u70ed\u60c5\u5730\u628a\u83dc\u5355\u9012\u8fc7\u6765\uff0c\u5ba2\u5b98\uff0c\u60a8\u770b\u770b\u4f60\u8981\u70b9\u4e9b\u4ec0\u4e48\uff1f<\/p>\n<p>\u5f20\u695a\u5c9a\u4e0a\u4e0b\u626b\u4e86\u4e00\u773c\uff0c\u80cc\u810a\u4e0d\u7981\u5fae\u5fae\u4e00\u51c9\uff0c\u4ee5\u524d\u4e5f\u56e0\u4e3a\u673a\u7f18\u5de7\u5408\u6765\u8fc7\u7c7b\u4f3c\u6863\u6b21\u7684\u5ba2\u6808\u5403\u8fc7\u996d\uff0c\u4ef7\u683c\u4f3c\u4e4e\u6ca1\u6709\u8fd9\u91cc\u8fd9\u4e48\u8d35\u5440\uff0c\u4e0d\u7981\u779f\u4e86\u779f\u56db\u5468\uff0c\u602a\u4e0d\u5f97\u8fd8\u6709\u8fd9\u4e48\u591a\u7a7a\u5ea7\u4f4d\u5440\uff0c\u7fa4\u4f17\u7684\u773c\u775b\u662f\u96ea\u4eae\u7684\u5440\u3002\u76ef\u7740\u540e\u9762\u4ef7\u683c\u6765\u56de\u626b\u89c6\uff0c\u7ec8\u4e8e\u786e\u8ba4\u4e86\u6700\u4fbf\u5b9c\u7684\u83dc\u662f\u756a\u8304\u9e21\u86cb\u6c64\uff1a\u201c\u90a3\u4e2a\uff0c\u5148\u7ed9\u6211\u6765\u4efd\u756a\u8304\u9e21\u86cb\u6c64\u8ba9\u6211\u6696\u6696\u8eab\u5b50\u3002\u201d<\/p>\n<p>\u7136\u540e\u5408\u4e0a\u83dc\u5355\uff0c\u9012\u7ed9\u4e86\u5c0f\u4e8c\uff0c\u5c0f\u4e8c\u4f3c\u4e4e\u6709\u4e9b\u4e0d\u786e\u5b9a\uff0c\u8fde\u5fd9\u95ee\u9053\uff1a\u201c\u5c31\u8fd9\u4e9b\uff1f\u201d<\/p>\n<p>\u201c\u5f53\u7136\u4e0d\u662f\uff01\u201d\u5f20\u695a\u5c9a\u7684\u667a\u6167\u53c8\u5f00\u542f\u4e86\uff0c\u201c\u6211\u662f\u5e7f\u4e1c\u798f\u5efa\u90a3\u8fb9\u8fc7\u6765\u7684\uff0c\u5403\u996d\u4e4b\u524d\u90fd\u662f\u5148\u559d\u6c64\u5f00\u80c3\uff0c\u559d\u5b8c\u6c64\u4ee5\u540e\u624d\u77e5\u9053\u81ea\u5df1\u7a76\u7adf\u60f3\u5403\u4ec0\u4e48\uff0c\u5230\u65f6\u5019\u6211\u518d\u70b9\u5176\u4ed6\u83dc\u3002\u201d<\/p>\n<p>\u201c\u8fd9\u2026\u2026\u597d\uff01\u201d\u5c0f\u4e8c\u4f3c\u4e4e\u53c8\u4e0d\u80fd\u591a\u95ee\u4ec0\u4e48\u3002\u8f6c\u8eab\u6b32\u79bb\u53bb\uff0c\u5374\u88ab\u5f20\u695a\u5c9a\u53eb\u4f4f\uff0c\u201c\u7b49\u4e0b\uff0c\u95ee\u4e0b\uff0c\u4f60\u4eec\u8fd9\u91cc\u8bf4\u4e66\u7684\u5185\u5bb9\u662f\u4ec0\u4e48\uff1f\u4ec0\u4e48\u65f6\u5019\u5f00\u59cb\uff1f\u201d<\/p>\n<p>\u201c\u5ba2\u5b98\uff0c\u4eca\u5929\u6211\u4eec\u5ba2\u6808\u8bf4\u4e66\u5185\u5bb9\u8bb2\u7684\u662f\u9a6c\u65af\u514b(mask)\u7684\u6545\u4e8b\uff0c12\u70b9\u5f00\u59cb\uff01\u201d<\/p>\n<p>\u5f20\u695a\u5c9a\u62ac\u5934\u770b\u770b\u5927\u5385\u60ac\u6302\u7684\u5927\u949f\uff0c\u5367\u69fd\uff0c\u8fd9\u4e0d\u5df2\u7ecf11\u70b960\u5206\u4e86\u561b\uff0c\u4e8e\u662f\u7fd8\u8d77\u4e86\u4e8c\u90ce\u817f\uff0c\u51c6\u5907\u6b23\u8d4f\u8d77\u6765\u3002<\/p>\n<p><strong>\u6ce8\u610f\uff1a<\/strong>\u672c\u6b21\u8bf4\u4e66\u65f6\u95f4\u5f88\u957f\uff0c\u5168\u90e8\u770b\u5b8c\u7ea6\u534a\u5c0f\u65f6\u5de6\u53f3\u3002<\/p>\n<h3>\u4e00\u3001CSS mask\u906e\u7f69\u7684\u8fc7\u5f80\u548c\u73b0\u72b6<\/h3>\n<p>CSS <code>mask<\/code>\u906e\u7f69\u5c5e\u6027\u7684\u5386\u53f2\u975e\u5e38\u4e45\u8fdc\u4e86\uff0c\u8fdc\u5230\u6bd4CSS3 <code>border-radius<\/code>\u7b49\u5c5e\u6027\u8fd8\u8981\u4e45\u8fdc\uff0c\u6700\u65e9\u662f\u51fa\u73b0\u5728Safari\u6d4f\u89c8\u5668\u4e0a\u7684\uff0c\u5dee\u4e0d\u591a\u53ef\u4ee5\u8ffd\u6eaf\u523009\u5e74\u3002<\/p>\n<p>\u4e0d\u8fc7\u90a3\u4e2a\u65f6\u5019\uff0c\u906e\u7f69\u53ea\u80fd\u4f5c\u4e3a\u5b9e\u9a8c\u6027\u7684\u5c5e\u6027\uff0c\u505a\u4e00\u4e9b\u7279\u6548\u4f7f\u7528\u3002\u6bd5\u7adf\u90a3\u4e2a\u5e74\u4ee3\u8fd8\u662fIE\u6d4f\u89c8\u5668\u7684\u65f6\u4ee3\uff0c\u5c5e\u6027\u867d\u597d\uff0c\u4f46\u4ef7\u503c\u6709\u9650\u3002<\/p>\n<p>\u4f46\u662f\u5982\u4eca\u60c5\u51b5\u5374\u5927\u6709\u53d8\u5316\uff0c\u9664\u4e86IE\u548cEdge\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\uff0cFirefox\uff0cChrome\u4ee5\u53ca\u79fb\u52a8\u7aef\u7b49\u90fd\u5df2\u7ecf\u5168\u7ebf\u652f\u6301\uff0c\u5176\u5b9e\u9645\u5e94\u7528\u4ef7\u503c\u5df2\u4e0d\u53ef\u540c\u65e5\u800c\u8bed\u3002\u5c24\u5176Firefox\u6d4f\u89c8\u5668\uff0c\u4ece\u7248\u672c55\u5f00\u59cb\uff0c\u5df2\u7ecf\u5168\u9762\u652f\u6301\u4e86CSS3 mask\u5c5e\u6027\u3002\u5e76\u4e14mask\u5c5e\u6027\u89c4\u8303\u5df2\u7ecf\u8fdb\u5165\u5019\u9009\u63a8\u8350\u89c4\u8303\u4e4b\u5217\uff0c\u4f1a\u8bf4\u4ee5\u540e\u8fdb\u5165\u65e2\u5b9a\u89c4\u8303\u6807\u51c6\u5df2\u7ecf\u662f\u677f\u4e0a\u9489\u9489\u7684\u4e8b\u60c5\uff0c\u5927\u5bb6\u53ef\u4ee5\u653e\u5fc3\u5b66\u4e60\uff0c\u5c06\u6765\u5fc5\u6709\u7528\u5904\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-11_194826.png\" width=\"482\" height=\"229\" alt=\"CSS mask\u5c5e\u6027\u517c\u5bb9\u6027\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<h3>\u4e8c\u3001CSS mask\u5c5e\u6027\u9762\u9762\u89c2<\/h3>\n<p>\u5728\u8fc7\u53bb\uff0cCSS <code>mask<\/code>\u5c5e\u6027\u5728\u4f7f\u7528\u7684\u65f6\u5019\u5c31\u662f<code>mask: xxx<\/code>\uff0c\u4f46\u662f\u73b0\u5728\u968f\u7740\u8fd9\u4e2a\u5c5e\u6027\u7684\u89c4\u8303\u5316\uff0c<code>mask<\/code>\u5c5e\u6027\u5b9e\u9645\u4e0a\u5df2\u7ecf\u6210\u4e3a\u4e86\u8bf8\u591a<code>mask-*<\/code>\u7684\u7f29\u5199\uff0c\u8fd9\u548c<code>background<\/code>, <code>border<\/code>\u6027\u8d28\u662f\u4e00\u6837\u7684\u3002<\/p>\n<p>\u5177\u4f53\u662f\u54ea\u4e9b\u5c5e\u6027\u7684\u7f29\u5199\u5462\uff0c\u53ef\u4ee5\u53c2\u89c1\u4e0b\u9762\u7684\u5217\u8868\uff1a<\/p>\n<ul>\n<li><a href=\"#mask-image\">mask-image<\/a><\/li>\n<li><a href=\"#mask-mode\">mask-mode<\/a><\/li>\n<li><a href=\"#mask-repeat\">mask-repeat<\/a><\/li>\n<li><a href=\"#mask-position\">mask-position<\/a><\/li>\n<li><a href=\"#mask-clip\">mask-clip<\/a><\/li>\n<li><a href=\"#mask-origin\">mask-origin<\/a><\/li>\n<li><a href=\"#mask-size\">mask-size<\/a><\/li>\n<li><a href=\"#mask-type\">mask-type<\/a><\/li>\n<li><a href=\"#mask-composite\">mask-composite<\/a><\/li>\n<\/ul>\n<p>\u4e0b\u9762\u5bf9\u4e0a\u9762\u7684\u8fd9\u4e9b\u5c5e\u6027\uff0c\u4e00\u4e2a\u4e00\u4e2a\u4ecb\u7ecd\u3002<\/p>\n<h3 id=\"mask-image\">\u4e09\u3001CSS mask-image\u5c5e\u6027\u8be6\u7ec6\u4ecb\u7ecd<\/h3>\n<p><code>mask-image<\/code>\u6307\u906e\u7f69\u4f7f\u7528\u7684\u56fe\u7247\u8d44\u6e90\uff0c\u9ed8\u8ba4\u503c\u662f<code>none<\/code>\uff0c\u4e5f\u5c31\u662f\u65e0\u906e\u7f69\u56fe\u7247\u3002\u56e0\u6b64\uff0c\u548c<code>border<\/code>\u5c5e\u6027\u4e2d\u7684<code>border-style<\/code>\u5c5e\u6027\u7c7b\u4f3c\uff0c\u662f\u4e00\u4e2a\u60f3\u8981\u6709\u6548\u679c\u5c31\u5fc5\u987b\u8bbe\u5b9a\u7684\u5c5e\u6027\u503c\u3002<\/p>\n<p><code>mask-image<\/code>\u906e\u7f69\u6240\u652f\u6301\u7684\u56fe\u7247\u7c7b\u578b\u975e\u5e38\u7684\u5e7f\u6cdb\uff0c\u53ef\u4ee5\u662f<code>url()<\/code>\u9759\u6001\u56fe\u7247\u8d44\u6e90\uff0c\u683c\u5f0f\u5305\u62ecJPG\uff0cPNG\u4ee5\u53caSVG\u7b49\u90fd\u662f\u652f\u6301\u7684\uff1b\u4e5f\u53ef\u4ee5\u662f\u52a8\u6001\u751f\u6210\u7684\u56fe\u7247\uff0c\u4f8b\u5982\u4f7f\u7528\u5404\u79cdCSS3\u6e10\u53d8\u7ed8\u5236\u7684\u56fe\u7247\u3002\u8bed\u6cd5\u4e0a\u652f\u6301CSS3\u5404\u7c7b\u6e10\u53d8\uff0c\u4ee5\u53ca<code>url()<\/code>\u529f\u80fd\u7b26\uff0c<code>image()<\/code>\u529f\u80fd\u7b26\uff0c\u751a\u81f3<code>element()<\/code>\u529f\u80fd\u7b26\u3002\u540c\u65f6\u8fd8\u652f\u6301\u591a\u80cc\u666f\uff0c\u56e0\u6b64\u7406\u8bba\u4e0a\uff0c\u4f7f\u7528<code>mask-image<\/code>\u6211\u4eec\u53ef\u4ee5\u906e\u7f69\u51fa\u4efb\u610f\u6211\u4eec\u60f3\u8981\u7684\u56fe\u5f62\uff0c\u975e\u5e38\u5f3a\u5927\u3002<\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u6211\u4eec\u901a\u8fc7\u5927\u91cf\u6848\u4f8b\u6765\u5c55\u793a<code>mask-image<\/code>\u7684\u5f3a\u5927\u4e4b\u5904\u3002<\/p>\n<p>\u9996\u5148\uff0c\u4e0b\u9762\u6240\u6709\u6848\u4f8b\u4f7f\u7528\u539f\u59cb\u56fe\u5982\u4e0b\uff1a<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/study\/p\/s500\/ps1.jpg\" width=\"250\" height=\"187.5\"><\/p>\n<h4>1. \u6700\u57fa\u7840\u7684png\u56fe\u7247\u906e\u7f69\u5c55\u793a<\/h4>\n<p>\u6211\u4eec\u4f7f\u7528\u7684\u906e\u7f69\u56fe\u7247\u662f\u4e00\u4e2a\u540d\u4e3a<code>loading.png<\/code>\u7684\u56fe\u7247\uff0c\u5982\u4e0b\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" alt=\"loading\u6548\u679c\" class=\"spin\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/loading_blue.png\"><\/p>\n<p>HTML\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;img src=\"ps1.jpg\" class=\"mask-image\"&gt;<\/pre>\n<p>CSS\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: url(loading.png);\r\n    mask-image: url(loading.png);\r\n}<\/pre>\n<p>\u6700\u540e\u7684\u6548\u679c\uff0c\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-11_211201.png\" width=\"307\" height=\"250\" alt=\"PNG\u56fe\u7247\u906e\u7f69\u540e\u7684\u6548\u679c\" class=\"alignnone\" \/><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u7684\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-image-png.html\" rel=\"noopener\" target=\"_blank\">mask-image png\u56fe\u7247\u6548\u679c\u793a\u610fdemo<\/a><\/p>\n<p>\u4ece\u4e0a\u9762\u8fd9\u4e2a\u6700\u57fa\u672c\u7684\u6848\u4f8b\uff0c\u6211\u4eec\u53ef\u4ee5\u770b\u51fa\uff0c\u6240\u8c13\u906e\u7f69\uff0c\u5c31\u662f\u539f\u59cb\u56fe\u7247\u53ea\u663e\u793a\u906e\u7f69\u56fe\u7247\u975e\u900f\u660e\u7684\u90e8\u5206\u3002\u4f8b\u5982\u672c\u6848\u4f8b\u4e2d\uff0cloading\u5706\u73af\u6709\u989c\u8272\u90e8\u5206\u5c31\u662f\u5916\u9762\u4e00\u5708\u5706\u73af\uff0c\u4e8e\u662f\u6700\u7ec8\u6211\u4eec\u770b\u5230\u6548\u679c\u662f\u539f\u59cb\u56fe\u7247\uff0c\u53ea\u9732\u51fa\u4e86\u4e00\u4e2a\u4e00\u4e2a\u7684\u5708\u5708\u73af\u3002\u5e76\u4e14\u534a\u900f\u660e\u533a\u57df\u4e5f\u51c6\u786e\u906e\u7f69\u663e\u793a\u4e86\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u6211\u4eec\u5f88\u5c11\u4f7f\u7528jpg\u56fe\u7247\u6765\u4f5c\u4e3a\u906e\u7f69\u56fe\u7247\u7684\uff0c\u56e0\u4e3ajpg\u56fe\u7247\u4e00\u5b9a\u662f\u5b8c\u5168\u4e0d\u900f\u660e\u7684\uff0c\u6700\u7ec8\u7684\u6548\u679c\u5c31\u662f\u539f\u56fe\u4ec0\u4e48\u4e5f\u770b\u4e0d\u5230\u3002<\/p>\n<p>\u9664\u4e86\u56fe\u7247\u4f7f\u7528\u5916\u94fe\u5730\u5740\uff0c\u6211\u4eec\u76f4\u63a5base64\u5185\u5d4c\u56fe\u7247\u4e5f\u662f\u652f\u6301\u7684\uff0c\u6548\u679c\u548c\u4e0a\u9762\u4e00\u6837\u3002\u505a\u4e86\u4e2ademo\uff0c\u6709\u5174\u8da3\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-image-png-base64.html\" rel=\"noopener\" target=\"_blank\">mask-image base64\u683c\u5f0fpng\u56fe\u7247\u906e\u7f69demo<\/a><\/p>\n<p>\u53e6\u5916\uff0c\u5982\u679c<code>loading.png<\/code>\u52a0\u8f7d\u5931\u8d25\uff0c\u5219Firefox\uff0cChrome\u6d4f\u89c8\u5668\u4e0b\u76f4\u63a5\u539f\u59cb\u56fe\u4e0d\u663e\u793a\u3002<\/p>\n<h4>2. SVG\u56fe\u5f62\u906e\u7f69\u6548\u679c\u5c55\u793a<\/h4>\n<p>\u9664\u4e86\u652f\u6301\u666e\u901a\u9759\u6001\u56fe\u7247\u7684\u906e\u7f69\uff0c<code>mask-image<\/code>\u8fd8\u652f\u6301SVG\u56fe\u5f62\u7684\u906e\u7f69\u6548\u679c\u3002<\/p>\n<p>\u5047\u8bbe\u6709\u4e0b\u9762\u540d\u4e3a<code>star.svg<\/code>\u7684SVG\u56fe\u5f62\uff1a<\/p>\n<p><svg viewBox=\"0 0 1025 1024\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32.03125\" height=\"32\"><path d=\"M1024 402.148612c0-15.180828-11.484233-24.615229-34.469943-28.311824L680.617553 328.921539 542.157967 48.915763c-7.789793-16.821125-17.849274-25.227377-30.154733-25.227377-12.303304 0-22.356318 8.406252-30.152578 25.227377L343.384602 328.921539 34.45701 373.836788C11.488544 377.533383 0 386.967784 0 402.148612c0 8.619641 5.129969 18.465733 15.387751 29.542586l224.002896 217.846934L186.467905 957.226341c-0.821226 5.746427-1.228606 9.86118-1.228606 12.311925 0 8.61533 2.151138 15.894282 6.457726 21.847632 4.304432 5.961972 10.762158 8.92787 19.381799 8.92787 7.38888 0 15.590364-2.450746 24.615229-7.378102l276.302714-145.247096 276.322113 145.247096c8.630418 4.927357 16.834058 7.378102 24.606607 7.378102 8.23166 0 14.473841-2.965898 18.780428-8.92787 4.293655-5.944729 6.446948-13.232302 6.446948-21.847632 0-5.326115-0.206923-9.427935-0.618614-12.311925l-52.927054-307.688209 223.384282-217.846934C1018.673885 421.02388 1024 411.173478 1024 402.148612z\"><\/path><\/svg><\/p>\n<p>CSS\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: url(star.svg);\r\n    mask-image: url(star.svg);\r\n}<\/pre>\n<p>\u7ed3\u679c\u539f\u59cb\u56fe\u7247\u663e\u793a\u4e3a\u4e00\u7247\u4e00\u7247\u7684\u661f\u661f\u5f62\u72b6\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-11_211437.png\" width=\"315\" height=\"245\" alt=\"SVG\u661f\u661f\u56fe\u5f62\u906e\u7f69\u540e\u7684\u6548\u679c\" class=\"alignnone\" \/><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u7684\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-image-svg-url.html\" rel=\"noopener\" target=\"_blank\">mask-image SVG\u56fe\u5f62\u906e\u7f69\u6548\u679cdemo<\/a><\/p>\n<h4>3. \u4f7f\u7528SVG\u56fe\u5f62\u4e2d&lt;mask&gt;\u5143\u7d20\u4f5c\u4e3a\u906e\u7f69\u5143\u7d20<\/h4>\n<p>\u6b64\u7528\u6cd5\u548c\u4e0a\u9762\u7684\u533a\u522b\u5728\u4e8e\u4ec5\u4ec5\u662f\u4f7f\u7528SVG\u4e2d\u5b9a\u4e49\u7684<code>&lt;mask&gt;<\/code>\u4f5c\u4e3a\u906e\u7f69\uff0c\u800c\u4e0d\u662fSVG\u5143\u7d20\u672c\u8eab\u3002<\/p>\n<p>\u5728\u5b9a\u4e49\u4e0a\uff0c\u6211\u4eec\u65e2\u80fd\u591f\u628a\u5185\u8054SVG\u4e2d\u7684<code>&lt;mask&gt;<\/code>\u4f5c\u4e3a\u906e\u7f69\uff0c\u4e5f\u53ef\u4ee5\u628a\u5916\u94fe\u7684SVG\u6587\u4ef6\u4e2d\u7684<code>&lt;mask&gt;<\/code>\u4f5c\u4e3a\u906e\u7f69\uff1b\u65e2\u80fd\u591f\u4f5c\u7528\u5728\u666e\u901aHTML\u4e0a\uff0c\u4e5f\u80fd\u591f\u4f5c\u7528\u5728SVG\u5143\u7d20\u4e0a\u3002<\/p>\n<p>\u5355\u4ece\u6700\u7ec8\u7684\u8868\u73b0\u4e0a\u6765\u770b\uff0c\u5185\u8054\u4f7f\u7528\u8fd8\u662f\u5916\u94fe\u4f7f\u7528\uff0c\u5e94\u7528\u5728\u666e\u901aHTML\u4e0a\u548c\u5e94\u7528\u5728SVG\u539f\u751f\u4e0a\u662f\u6709\u6bd4\u8f83\u5927\u7684\u517c\u5bb9\u6027\u5dee\u5f02\u7684\uff0c\u8fd9\u91cc\u6709\u5fc5\u8981\u597d\u597d\u8bf4\u660e\u4e0b\u3002<\/p>\n<hr>\n<p>\u5047\u8bbe\u6709\u5982\u4e0bSVG\u4ee3\u7801\uff1a<\/p>\n<pre>&lt;svg width=\"50\" height=\"50\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;\r\n    &lt;ellipse cx=\"25\" cy=\"25\" rx=\"20\" ry=\"10\" fill=\"#000000\" stroke=\"none\"&gt;&lt;\/ellipse&gt;\r\n    &lt;rect x=\"15\" y=\"5\" width=\"20\" height=\"40\" rx=\"5\" ry=\"5\" fill=\"#000000\" stroke=\"none\"&gt;&lt;\/rect&gt;\r\n&lt;\/svg&gt;<\/pre>\n<p>\u5219\u8868\u73b0\u662f\u4e0b\u9762\u8fd9\u6837\u7684\u201c\u59e8\u5988\u5dfe\u201d\u5f62\u72b6\uff08\u6548\u679c\u5b9e\u65f6\uff09\uff1a<\/p>\n<p><svg width=\"50\" height=\"50\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><ellipse cx=\"25\" cy=\"25\" rx=\"20\" ry=\"10\" fill=\"#000000\" stroke=\"none\"><\/ellipse>\t<rect x=\"15\" y=\"5\" width=\"20\" height=\"40\" rx=\"5\" ry=\"5\" fill=\"#000000\" stroke=\"none\"><\/rect><\/svg><\/p>\n<p>\u4e0b\u9762\u6211\u4eec\u8981\u628a\u4e0a\u9762\u7684\u8fd9\u4e2a\u201c\u59e8\u5988\u5dfe\u201d\u5f62\u72b6\u8f6c\u5316\u4e3a\u6211\u4eec\u9700\u8981\u7684\u906e\u7f69\u3002<\/p>\n<p>\u7406\u8bba\u4e0a\uff0c\u6211\u4eec\u5916\u9762\u76f4\u63a5\u5957\u4e2a<code>&lt;mask&gt;<\/code>\u6807\u7b7e\u653e\u5728<code>&lt;defs&gt;<\/code>\u4e2d\u5c31\u53ef\u4ee5\u4e86\uff0c\u7c7b\u4f3c\u4e0b\u9762\u8fd9\u6837\uff1a<\/p>\n<pre>&lt;svg&gt;\r\n    &lt;defs&gt;    \r\n        &lt;mask id=\"mask\"&gt;\r\n            &lt;ellipse cx=\"25\"  ...&gt;&lt;\/ellipse&gt;\r\n            &lt;rect x=\"15\" ...&gt;&lt;\/rect&gt;\r\n        &lt;\/mask&gt;\r\n    &lt;\/defs&gt;    \r\n&lt;\/svg&gt;<\/pre>\n<p>\u4f46\u662f\uff0c<strong>\u6ce8\u610f<\/strong>\uff0c\u5982\u679c\u4f5c\u4e3aCSS <code>mask<\/code>\u5c5e\u6027\u503c\u4f7f\u7528\uff0c\u4e0a\u9762\u8fd9\u6837\u76f4\u63a5\u5904\u7406\u662f\u6ca1\u6709\u4efb\u4f55\u6548\u679c\u7684\uff0c\u4e3b\u8981\u95ee\u9898\u5728\u4e8e\u5c3a\u5bf8\u7684\u8bc6\u522b\u4e0a\u4f1a\u6709\u969c\u788d\u3002<\/p>\n<p>\u901a\u5e38\u7684\u505a\u6cd5\u662f\u8bbe\u5b9a<code>&lt;mask&gt;<\/code>\u5143\u7d20\u7684<code>maskContentUnits<\/code>\u5c5e\u6027\u503c\u4e3a<code>objectBoundingBox<\/code>\uff0c\u7136\u540e\u6211\u4eec\u7684<code>&lt;mask&gt;<\/code>\u5143\u7d20\u5185\u7684\u56fe\u5f62\u5c3a\u5bf8\u5168\u90e8\u9650\u5b9a\u5728<code>1px*1px<\/code>\u7684\u89c4\u5219\u5185\u3002<\/p>\n<p>\u4e8e\u662f\uff0c\u672c\u6848\u4f8b\u9700\u8981\u7684SVG <code>&lt;mask&gt;<\/code>\u76f8\u5173\u4ee3\u7801\u7406\u8bba\u4e0a\u5e94\u8be5\u662f\u4e0b\u9762\u8fd9\u6837\uff1a<\/p>\n<pre>&lt;svg&gt;\r\n    &lt;defs&gt;    \r\n        &lt;mask id=\"mask\" maskContentUnits=\"objectBoundingBox\"&gt;\r\n            &lt;ellipse cx=\".5\" cy=\".5\" rx=\".4\" ry=\".2\" fill=\"white\"&gt;&lt;\/ellipse&gt;\r\n            &lt;rect x=\".3\" y=\".1\" width=\".4\" height=\".8\" rx=\".1\" ry=\".1\" fill=\"white\"&gt;&lt;\/rect&gt;\r\n        &lt;\/mask&gt;\r\n    &lt;\/defs&gt;    \r\n&lt;\/svg&gt;<\/pre>\n<p><strong>\u7136\u800c\u4e8b\u60c5\u8fdc\u6ca1\u6709\u8fd9\u4e48\u7b80\u5355\uff1a<\/strong><\/p>\n<ol>\n<li>SVG <code>&lt;mask&gt;<\/code>\u5176\u906e\u7f69\u6a21\u5f0f\u9ed8\u8ba4\u548c\u666e\u901a\u56fe\u7247\u7684\u906e\u7f69\u662f\u4e0d\u4e00\u6837\u7684\uff0c\u5176\u906e\u7f69\u7c7b\u578b\u662f<code>luminance<\/code>\uff0c\u4e5f\u5c31\u662f\u57fa\u4e8e\u4eae\u5ea6\u6765\u8fdb\u884c\u906e\u7f69\u7684\u3002\u800c\u666e\u901a\u56fe\u7247\u9ed8\u8ba4\u906e\u7f69\u7c7b\u578b\u662f<code>alpha<\/code>\uff0c\u57fa\u4e8e\u900f\u660e\u5ea6\u6765\u906e\u7f69\u7684\u3002\u5f53\u7136\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7<code>mask-type<\/code>\u6216<code>mask-mode<\/code>\u6765\u8bbe\u7f6eSVG <code>&lt;mask&gt;<\/code>\u906e\u7f69\u7c7b\u578b\u662f<code>alpha<\/code>\uff0c\u7528\u6cd5\u4e3a\uff1a<code>mask-type:alpha<\/code>\u3002\n<p>\u56e0\u6b64\uff0c\u4e0a\u9762\u4ee3\u7801\u4e24\u4e2a\u5f62\u72b6\u7684\u586b\u5145\u4f7f\u7528\u7684\u662f<code>fill=\"white\"<\/code>\uff0c\u767d\u8272\u4eae\u5ea6\u6700\u9ad8\uff0c\u8868\u793a\u5b8c\u5168\u906e\u7f69\u3002\u5982\u679c\u6362\u6210<code>fill=\"black\"<\/code>\u5219\u662f\u5b8c\u5168\u900f\u660e\u3002<\/li>\n<li>\u5047\u8bbe\u4e0a\u9762\u7684SVG\u4ee3\u7801\u5185\u8054\u5728\u9875\u9762\u4e2d\uff0c\u540c\u65f6\u6211\u4eec\u5e94\u7528\u4e86\u5982\u4e0bCSS\u4ee3\u7801\uff1a\n<pre>.mask-image {\r\n    mask-image: url(#mask);    <span style=\"color:green;\">\/* #mask\u5bf9\u5e94SVG\u4e2d&lt;mask&gt;\u5143\u7d20\u7684id\u5c5e\u6027\u503c *\/<\/span>\r\n}<\/pre>\n<p>\u7ed3\u679c\u4f1a\u53d1\u73b0\uff0c\u5728Firefox\u6d4f\u89c8\u5668\u4e0b\uff08\u76ee\u524d\u4ec5Firefox\u6d4f\u89c8\u5668\u652f\u6301\u4efb\u610f\u5143\u7d20\u7684SVG <code>&lt;mask&gt;<\/code>\u906e\u7f69\uff09\uff0c\u906e\u7f69\u6548\u679c\u7684\u8fb9\u7f18\u6709\u4e9b\u6bdb\u7cd9\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_000122.png\" width=\"278\" height=\"211\" alt=\"\u906e\u7f69\u540e\u6bdb\u7cd9\u7684\u8fb9\u7f18\" class=\"alignnone\" \/><\/p>\n<p>\u663e\u7136\u8fd9\u6837\u7684\u906e\u7f69\u6548\u679c\u662f\u65e0\u6cd5\u8ba9\u6211\u4eec\u6ee1\u610f\u7684\uff0c\u597d\u5728\u6211\u4eec\u662f\u6709\u529e\u6cd5\u53ef\u4ee5\u8ba9\u8fd9\u4e2a\u8fb9\u7f18\u53d8\u5f97\u66f4\u52a0\u5e73\u6ed1\u7684\uff0c\u90a3\u5c31\u662f\u91cd\u65b0\u6784\u5efa\u4e00\u5957\u540c\u6837\u5f62\u72b6\uff0c\u5c3a\u5bf8\u7565\u5927\u7684\uff0c\u586b\u5145\u4e3a\u9ed1\u8272\u7684\u56fe\u5f62\uff0c\u7c7b\u4f3c\u4e0b\u9762\uff1a<\/p>\n<pre>&lt;svg&gt;\r\n    &lt;defs&gt;    \r\n        &lt;mask id=\"mask\" maskContentUnits=\"objectBoundingBox\"&gt;\r\n            <span style=\"color:green;\">&lt;!-- \u67d4\u5316\u8fb9\u7f18 --&gt;<\/span>\r\n            &lt;ellipse cx=\".5\" cy=\".5\" rx=\".48\" ry=\".28\" fill=\"black\"&gt;&lt;\/ellipse&gt;\r\n            &lt;rect x=\".2\" y=\"0\" width=\".6\" height=\"1\" rx=\".1\" ry=\".1\" fill=\"black\"&gt;&lt;\/rect&gt;\r\n            <span style=\"color:green;\">&lt;!-- \u4e3b\u4f53\u906e\u7f69 --&gt;<\/span>\r\n            &lt;ellipse cx=\".5\" cy=\".5\" rx=\".4\" ry=\".2\" fill=\"white\"&gt;&lt;\/ellipse&gt;\r\n            &lt;rect x=\".3\" y=\".1\" width=\".4\" height=\".8\" rx=\".1\" ry=\".1\" fill=\"white\"&gt;&lt;\/rect&gt;\r\n        &lt;\/mask&gt;\r\n    &lt;\/defs&gt;    \r\n&lt;\/svg&gt;<\/pre>\n<p>\u6b64\u65f6\uff0c\u6211\u4eec\u7684\u56fe\u7247\u906e\u7f69\u8fb9\u7f18\u5c31\u53d8\u5f97\u5f02\u5e38\u5e73\u6ed1\u4e86\uff0c\u5982\u4e0b\u622a\u56fe\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_000542.png\" width=\"309\" height=\"234\" alt=\"\u906e\u7f69\u8fb9\u7f18\u53d8\u5f97\u5e73\u6ed1\u4e86\" class=\"alignnone\" \/><\/p>\n<\/li>\n<li>\u5f53\u5305\u542b<code>&lt;mask&gt;<\/code>\u906e\u7f69\u7684SVG\u5185\u8054\u5728\u9875\u9762\u4e2d\u7684\u65f6\u5019\uff0c\u6211\u4eec\u662f\u4e0d\u5e0c\u671b\u8fd9\u4e2aSVG\u5360\u636e\u4efb\u4f55\u5c3a\u5bf8\u7684\uff0c\u9700\u8981\u628a\u8fd9\u4e2aSVG\u9690\u85cf\u6389\u3002\u6b64\u65f6\uff0c\u662f\u4e0d\u80fd\u4f7f\u7528<code>display:none<\/code>\u6216\u8005\u4f7f\u7528<code>visibility:hidden<\/code>\u9690\u85cf\u7684\uff0c\u5426\u5219\u6211\u4eec\u7684\u906e\u7f69\u6548\u679c\u5c31\u4f1a\u5931\u6548\u3002\u9700\u8981\u4f7f\u7528\u5176\u4ed6\u7684\u65b9\u6cd5\u9690\u85cf\uff0c\u4f8b\u5982\uff1a\n<pre>svg {\r\n    width: 0; height: 0;\r\n    position: absolute;\r\n}<\/pre>\n<p>\u6216\u8005\uff08<code>-150px<\/code>\u4ec5\u793a\u610f\u4e0d\u5177\u4ee3\u8868\u6027\uff09\uff1a<\/p>\n<pre>svg {\r\n    position: absolute;\r\n    left: -150px; top: -150px;\r\n}<\/pre>\n<\/li>\n<\/ol>\n<hr>\n<p>\u4e0b\u9762\u6765\u770b\u4e0b\u4e0d\u540c\u8c03\u7528\u65b9\u5f0f\u548c\u4f5c\u7528\u7684\u4e0d\u540c\u5143\u7d20\u4e0a\u7684\u517c\u5bb9\u8868\u73b0\uff0cSVG\u4ee3\u7801\u90fd\u662f\u4e0a\u9762\u5e26\u201c\u67d4\u5316\u8fb9\u7f18\u201d\u6ce8\u91ca\u7684\u90a3\u6bb5\u4ee3\u7801\uff1a<\/p>\n<ol>\n<li><strong>\u666e\u901aHTML\u5143\u7d20\u5185\u8054SVG\u7684<code>&lt;mask&gt;<\/code><\/strong>\n<p>HTML\u548cCSS\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;img src=\"ps1.jpg\" class=\"mask-image\"&gt;<\/pre>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: url(#mask);\r\n    mask-image: url(#mask);\r\n}<\/pre>\n<p>\u7ed3\u679c\u663e\u793aChrome\u6d4f\u89c8\u5668\u5e76\u4e0d\u652f\u6301\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_001917.png\" width=\"337\" height=\"279\" alt=\"Chrome\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u666e\u901aHTML\u5143\u7d20\u7684\u5185\u8054SVG\u906e\u7f69\" class=\"alignnone\" \/><\/p>\n<p>Firefox\u6d4f\u89c8\u5668\u8868\u73b0\u7b26\u5408\u9884\u671f\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_002547.png\" width=\"314\" height=\"228\" alt=\"\u666e\u901a\u5143\u7d20\u5185\u8054SVG\u906e\u7f69Firefox\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-image-svg-inline.html\" rel=\"noopener\" target=\"_blank\">mask-image\u5185\u8054SVG\u7684mask\u5143\u7d20\u906e\u7f69demo<\/a><\/p>\n<\/li>\n<li><strong>SVG\u5143\u7d20\u5185\u8054SVG\u7684<code>&lt;mask&gt;<\/code><\/strong>\n<p>HTML\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;svg width=\"250\" height=\"186\"&gt;\r\n    &lt;image xlink:href=\"ps1.jpg\" class=\"mask-image\" width=\"250\" height=\"186\"&gt;&lt;\/image&gt;\r\n&lt;\/svg&gt;<\/pre>\n<p>CSS\u5982\u4e0b\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: url(#mask);\r\n    mask: url(#mask);\r\n    mask-image: url(#mask);\r\n}<\/pre>\n<p>\u7ed3\u679c\u6240\u6709\u6d4f\u89c8\u5668\uff0c\u5305\u62ecIE9\u6d4f\u89c8\u5668\u90fd\u8868\u73b0\u4e3a\u9884\u671f\u7684\u201c\u59e8\u5988\u5dfe\u201d\u906e\u7f69\u6548\u679c\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_005224.png\" width=\"260\" height=\"270\" alt=\"IE9\u6d4f\u89c8\u5668\u4e0bSVG\u5143\u7d20\u5e94\u7528\u906e\u7f69\u540e\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u7684\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-image-svg-image-inline.html\" rel=\"noopener\" target=\"_blank\">SVG &lt;image&gt;\u4e0e\u5185\u8054SVG mask\u5143\u7d20\u906e\u7f69demo<\/a><\/p>\n<p>\u7136\u800c\uff0c\u7136\u800c\uff0c\u7136\u800c\uff0c\u91cd\u8981\u8f6c\u6298\u8bf4\u4e09\u904d\uff0c\u8fd9\u91cc\uff0c\u5305\u62ecIE9\u5728\u5185\u6d4f\u89c8\u5668\u5168\u90e8\u906e\u7f69\u6709\u6548\uff0c\u5e76\u4e0d\u662f\u56e0\u4e3a\u652f\u6301<code>mask-image<\/code>\u5c5e\u6027\uff0c\u9664\u4e86Firefox\u6d4f\u89c8\u5668\uff0c\u5b9e\u9645\u4e0a\u76ee\u524d\u5176\u4ed6\u6240\u6709\u6d4f\u89c8\u5668\u90fd\u4e0d\u652f\u6301SVG\u5143\u7d20\u7684<code>&lt;mask-image&gt;<\/code>\u906e\u7f69\uff1b\u8fd9\u91cc\u4e4b\u6240\u4ee5\u5176\u4ed6\u6d4f\u89c8\u5668\u90fd\u6709\u6548\u679c\u8d77\u4f5c\u7528\u7684\uff0c\u5b9e\u9645\u4e0a\u662f<code>mask<\/code>\u5c5e\u6027\uff0c\u751f\u6548\u539f\u7406\u7c7b\u4f3c\u4e8e\u76f4\u63a5\u5728SVG\u7684<code>&lt;image&gt;<\/code>\u5143\u7d20\u4e0a\u8bbe\u7f6e<code>mask<\/code>\u5c5e\u6027\uff0c\u7c7b\u4f3c\u8fd9\u6837\uff1a<\/p>\n<pre>&lt;svg width=\"250\" height=\"186\"&gt;\r\n    &lt;image xlink:href=\"ps1.jpg\" mask=\"url(#mask)\" width=\"250\" height=\"186\"&gt;&lt;\/image&gt;\r\n&lt;\/svg&gt;<\/pre>\n<p>\u56e0\u6b64\uff0c\u624d\u6709\u6548\u679c\u7684\u3002\u7c7b\u4f3c\u7684CSS\u4e2d\u7684<code>fill<\/code>, <code>stroke<\/code>\u53ef\u4ee5\u4f5c\u7528\u5728SVG\u5143\u7d20\u4e5f\u662f\u540c\u6837\u9053\u7406\u3002<\/p>\n<p>\u800c<code>mask-image<\/code>\u662fCSS\u7279\u6709\uff0cSVG\u672c\u8eab\u5e76\u6ca1\u6709\uff0c\u56e0\u6b64\uff0c\u5982\u679c\u662f\u4e0b\u9762CSS\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: url(#mask);\r\n    mask-image: url(#mask);\r\n}<\/pre>\n<p>\u5219\u540c\u6837\u662f\u4ec5Firefox\u6d4f\u89c8\u5668\u652f\u6301\u3002<\/p>\n<\/li>\n<li><strong>\u666e\u901aHTML\u5143\u7d20\u5916\u94feSVG\u6587\u4ef6\u7684<code>&lt;mask&gt;<\/code><\/strong>\n<p>\u65e0\u8bba\u662f<code>clip-path<\/code>\u8fd8\u662f\u8fd9\u91cc\u7684<code>mask<\/code>\uff0c\u5916\u94feSVG\u7279\u6027\u7684\u652f\u6301\u4e00\u5b9a\u662f\u6bd4\u5185\u8054SVG\u5f31\u7684\u3002\u65e2\u7136Chrome\u6d4f\u89c8\u5668\u8fde\u666e\u901aHTML\u7684\u5185\u8054SVG\u7684<code>&lt;mask&gt;<\/code>\u90fd\u4e0d\u652f\u6301\uff0c\u81ea\u7136\u80af\u5b9a\u4e0d\u652f\u6301\u8fd9\u91cc\u7684\u5916\u94feSVG\u6587\u4ef6<code>&lt;mask&gt;<\/code>\u5143\u7d20\u7684\u906e\u7f69\u652f\u6301\u3002<\/p>\n<p>\u90a3\u4e4b\u524d\u8868\u73b0\u826f\u597d\u7684Firefox\u6d4f\u89c8\u5668\u5462\uff1f<\/p>\n<p>\u6bd4\u8f83\u5e78\u8fd0\uff0cFirefox\u6d4f\u89c8\u5668\u6700\u8fd1\u652f\u6301\u4e86\u4efb\u610f\u5143\u7d20\u5916\u94feSVG\u6587\u4ef6\u7684<code>&lt;mask&gt;<\/code>\uff0c\u4e3a\u4ec0\u4e48\u8bf4\u6700\u8fd1\u5462\uff1f\u6211\u770b\u4e86\u4e0b\u6211\u73b0\u5728\u7684Firefox\uff0c\u663e\u793a\u6700\u65b0\u7248\uff0c\u7248\u672c\u662f56\uff0c\u7136\u540eFirefox\u652f\u6301\u4efb\u610f\u5143\u7d20\u53ef\u4ee5\u4f7f\u7528\u5916\u94feSVG <code>&lt;mask&gt;<\/code>\u5143\u7d20\u4f5c\u4e3a\u906e\u7f69\u662f\u7248\u672c55\u5f00\u59cb\u4e86\u3002<\/p>\n<p>\u81f3\u4e8e\u4e0a\u9762\u7684\uff0c\u4efb\u610f\u5143\u7d20\u5185\u8054SVG <code>&lt;mask&gt;<\/code>\u7684\u652f\u6301\uff0cFirefox\u5f88\u65e9\u5c31\u5df2\u7ecf\u652f\u6301\u3002<\/p>\n<p>\u76f8\u4fe1\u4e0d\u4e45\u7684\u7248\u672c\uff0cChrome\u6d4f\u89c8\u5668\u4e5f\u4f1a\u5bf9\u5176\u8fdb\u884c\u652f\u6301\u7684\uff0c\u53ef\u4ee5\u8010\u5fc3\u7b49\u5f85\u3002\n<\/li>\n<li><strong>SVG\u5143\u7d20\u5916\u94feSVG\u6587\u4ef6\u7684<code>&lt;mask&gt;<\/code><\/strong>\n<p>\u7ecf\u6d4b\u8bd5\uff0c\u76ee\u524d\u8fd9\u4e2a\u4e5f\u4ec5\u4ec5Firefox\u6d4f\u89c8\u5668\u652f\u6301\u3002<\/li>\n<\/ol>\n<h4>4. image()\u529f\u80fd\u7b26\u8d44\u6e90\u4f5c\u4e3a\u906e\u7f69\u5143\u7d20<\/h4>\n<p>\u5982\u4e0bCSS\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: image(url(loading.png), skyblue);\r\n    mask-image: image(url(loading.png), skyblue);\r\n}<\/pre>\n<p>\u7531\u4e8e\u76ee\u524dChrome\u548cFirefox\u5c1a\u672a\u652f\u6301image()\u529f\u80fd\u7b26\uff0c\u56e0\u6b64\uff0c\u4e0a\u9762\u4ee3\u7801\u65e0\u6cd5\u8868\u73b0\u4e3a\u9884\u671f\u7684\u906e\u7f69\u6548\u679c\u3002\u4e0d\u8fc7\u6211\u8fd8\u662f\u505a\u4e86demo\u9875\u9762\uff0c\u56e0\u4e3a\u8bf4\u4e0d\u5b9a\u54ea\u5929\u5c31\u652f\u6301\u4e86\uff0c\u89c1\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-image-image-function.html\" rel=\"noopener\" target=\"_blank\">mask-image image()\u529f\u80fd\u7b26\u4e0e\u906e\u7f69\u6548\u679cdemo<\/a><\/p>\n<h4>5. image-set()\u529f\u80fd\u7b26\u8d44\u6e90\u4f5c\u4e3a\u906e\u7f69\u5143\u7d20<\/h4>\n<p>\u76f8\u6bd4<code>image()<\/code>\u529f\u80fd\u7b26\uff0c<code>image-set()<\/code>\u529f\u80fd\u7b26\u7684\u517c\u5bb9\u6027\u8981\u597d\u5f88\u591a\uff0c\u867d\u7136\u76ee\u524dEdge, Firefox\u90fd\u4e0d\u652f\u6301\uff0c\u4f46Chrome\/Safari\/Android\u90fd\u53ef\u4ee5\u65e0\u969c\u788d\u4f7f\u7528\uff0c\u610f\u5473\u7740\u79fb\u52a8\u7aef\u53ef\u4ee5\u653e\u5fc3\u4f7f\u7528\u3002CSS <code>image-set()<\/code>\u7684\u4e3b\u8981\u4f5c\u7528\u662f\u53ef\u4ee5\u8ba9\u4e0d\u540c\u5c4f\u5e55\u5bc6\u5ea6\u8bbe\u5907\u52a0\u8f7d\u4e0d\u540c\u7684\u56fe\u7247\u8d44\u6e90\uff08\u4e4b\u524d\u6709<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/2015\/11\/anatomy-of-responsive-images\/\">\u6587\u7ae0<\/a>\u63d0\u53ca\u8fc7\uff09\u3002<\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\u5982\u4e0b\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: -webkit-image-set(url(loading.png) 1x, url(star.svg) 2x);\r\n    mask-image: image-set(url(loading.png) 1x, url(star.svg) 2x);\r\n}<\/pre>\n<p>\u8868\u793a1\u500d\u5c4f\u5e55\u5bc6\u5ea6\uff08<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/2012\/08\/window-devicepixelratio\/\">\u8bbe\u5907\u50cf\u7d20\u6bd4<\/a>\u4e3a1\uff09\u8bbe\u5907\u4e0b\u4f7f\u7528<code>loading.png<\/code>\u4f5c\u4e3a\u906e\u7f69\u56fe\u7247\uff0c\u5c4f\u5e55\u5bc6\u5ea6\u6bd42\u5927\u7684\u65f6\u5019\u4f7f\u7528<code>star.svg<\/code>\u4f5c\u4e3a\u906e\u7f69\u56fe\u7247\u3002<\/p>\n<p>\u4e8e\u662f\uff0c\u666e\u901aPC\u663e\u793a\u5668\u4e0b\uff0c\u906e\u7f69\u6548\u679c\u8fd9\u6837\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" width=\"307\" height=\"250\" alt=\"PNG\u56fe\u7247\u906e\u7f69\u540e\u7684\u6548\u679c\" class=\"alignnone\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-11_211201.png\"><\/p>\n<p>\u4f46\u662f\uff0c\u5982\u679c\u662f\u624b\u673a\u8bbe\u5907\u6216\u8005iMac, Mac pro\u4e4b\u7c7b\u8bbe\u5907\uff0c\u5219\u4f1a\u662f\u4e0b\u56fe\u6240\u793a\u6548\u679c\uff1a<br \/>\n\uff0c<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_190618.png\" width=\"345\" height=\"323\" alt=\"retina\u5c4f\u5e55\u4e0b\u52a0\u8f7d\u661f\u661f\u4f5c\u4e3a\u906e\u7f69\u56fe\u7247\" class=\"alignnone\" \/><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-image-image-set-function.html\" rel=\"noopener\" target=\"_blank\">mask-image image-set()\u529f\u80fd\u7b26\u4e0e\u906e\u7f69\u6548\u679cdemo<\/a><\/p>\n<h4>6. cross-fade()\u529f\u80fd\u7b26\u8d44\u6e90\u4f5c\u4e3a\u906e\u7f69\u5143\u7d20<\/h4>\n<p>\u56fe\u7247\u900f\u660e\u53e0\u52a0\u529f\u80fd\u7b26<code>cross-fade()<\/code>\u62115\u5e74\u524d\u5c31\u6709\u4ecb\u7ecd\u8fc7\uff0c\u6709\u5174\u8da3\u53ef\u4ee5<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/2012\/09\/css3-background-image-cross-fade\/\">\u70b9\u51fb\u8fd9\u91cc<\/a>\u8fdb\u884c\u4e86\u89e3\u3002<\/p>\n<p>\u76ee\u524d\u517c\u5bb9\u6027\u548c<code>image-set()<\/code>\u529f\u80fd\u7b26\u7c7b\u4f3c\uff0cChrome\u548c\u79fb\u52a8\u7aef\u53ef\u4ee5\u4f7f\u7528\uff0cEdge, Firefox\u5c1a\u4e0d\u652f\u6301\u3002<\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\u5982\u4e0b\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: -webkit-cross-fade(url(loading.png), url(star.svg), 50%);\r\n    mask-image: cross-fade(url(loading.png), url(star.svg), 50%);\r\n}<\/pre>\n<p>\u8868\u793a\u542b\u4e49\u662f<code>star.svg<\/code>\u8fd9\u5f20\u56fe\u7247\u4fdd\u6301\u4e3a50%\u900f\u660e\u5ea6\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u6700\u7ec8\u7684\u906e\u7f69\u6548\u679c\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_191649.png\" width=\"332\" height=\"260\" alt=\"cross-fade()\u529f\u80fd\u7b26\u906e\u7f69\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-image-cross-fade-function.html\" rel=\"noopener\" target=\"_blank\">mask-image cross-fade()\u529f\u80fd\u7b26\u4e0e\u56fe\u7247\u906e\u7f69demo<\/a><\/p>\n<h4>7. element()\u529f\u80fd\u7b26\u8d44\u6e90\u4f5c\u4e3a\u906e\u7f69\u5143\u7d20<\/h4>\n<p><code>element()<\/code>\u529f\u80fd\u7b26\u53ef\u4ee5\u8ba9\u9875\u9762\u4e0a\u7684DOM\u5143\u7d20\u4f5c\u4e3a\u56fe\u7247\u663e\u793a\uff0c\u8fd9\u4e2a\u540c\u6837\u6211\u4e4b\u524d\u4ecb\u7ecd\u8fc7\uff0c6\u5e74\u524d\uff0c\u6709\u5174\u8da3\u53ef\u4ee5<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=1758\">\u70b9\u51fb\u8fd9\u91cc<\/a>\u8fdb\u884c\u4e86\u89e3\u3002<\/p>\n<p>\u867d\u7136\u8fd9\u4e48\u591a\u5e74\u8fc7\u53bb\u4e86\uff0c\u4f46\u662f\u4f9d\u7136\u7d27\u7d27firefox\u6d4f\u89c8\u5668\u652f\u6301<code>element()<\/code>\u529f\u80fd\u7b26\uff0c\u5e76\u4e14\u9700\u8981<code>-moz-<\/code>\u79c1\u6709\u524d\u7f00\u3002<\/p>\n<p>\u5047\u8bbe\u9875\u9762\u4e0a\u6709\u4e00\u6bb5HTML\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;h4 id=\"title\"&gt;\u4f5c\u4e3a\u56fe\u7247\u7684\u6807\u9898\u6587\u5b57&lt;\/h4&gt;<\/pre>\n<p>CSS\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>#title {\r\n    width: -webkit-fit-content;\r\n    width: -moz-fit-content;\r\n    width: fit-content;\r\n}\r\n.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: -webkit-element(#title);\r\n    mask-image: -moz-element(#title);\r\n    mask-image: element(#title);\r\n}<\/pre>\n<p>\u5219Firefox\u6d4f\u89c8\u5668\u4e0b\u7684\u906e\u7f69\u6548\u679c\u6700\u7ec8\u8868\u73b0\u4e3a\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_192919.png\" width=\"321\" height=\"317\" alt=\"element()\u529f\u80fd\u7b26\u4e0e\u5143\u7d20\u4f5c\u4e3a\u906e\u7f69\u56fe\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff08Firefox\u4e0b\u6709\u6548\u679c\uff09\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-image-element-function.html\" rel=\"noopener\" target=\"_blank\">mask-image element()\u529f\u80fd\u7b26\u4e0e\u906e\u7f69demo<\/a>\uff0c<\/p>\n<h4>8. &lt;gradient&gt;\u6e10\u53d8\u4f5c\u4e3a\u906e\u7f69\u56fe\u7247<\/h4>\n<p>\u8fd9\u91cc\u7684\u6e10\u53d8\u53ef\u4ee5\u662f\u4efb\u610f\u7c7b\u578b\u7684CSS3\u6e10\u53d8\uff0c\u4f8b\u5982\u53ef\u4ee5\u662f<code>linear-gradient()<\/code>\u7ebf\u6027\u6e10\u53d8\uff0c\u4e5f\u53ef\u4ee5\u662f<code>repeating-linear-gradient()<\/code>\u91cd\u590d\u7ebf\u6027\u6e10\u53d8\uff0c\u4e5f\u53ef\u4ee5\u662f<code>radial-gradient()<\/code>\u5f84\u5411\u6e10\u53d8\uff0c\u4e5f\u53ef\u4ee5\u662f<code>repeating-radial-gradient()<\/code>\u91cd\u590d\u5f84\u5411\u6e10\u53d8\uff0c\u4e5f\u53ef\u4ee5\u662f<code>conic-gradient<\/code>\u9525\u5f62\u6e10\u53d8\uff08\u53ea\u8981\u6d4f\u89c8\u5668\u652f\u6301\uff09\u3002<\/p>\n<p>\u4f8b\u5982\u4e0b\u9762\u7684CSS\u4ee3\u7801\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 12px);\r\n    mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 12px);\r\n}<\/pre>\n<p>\u6700\u7ec8\u5448\u73b0\u4e3a\u7eb9\u7406\u906e\u7f69\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_194354.png\" width=\"309\" height=\"256\" alt=\"\u91cd\u590d\u5f84\u5411\u6e10\u53d8\u4f5c\u4e3a\u906e\u7f69\u7684\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-image-repeating-radial-gradient-function.html\" rel=\"noopener\" target=\"_blank\">mask-image\u91cd\u590d\u5f84\u5411\u6e10\u53d8\u4e0e\u906e\u7f69demo<\/a><\/p>\n<p>\u4ee5\u4e0a8\u79cd\u5c31\u662f<code>mask-image<\/code>\u652f\u6301\u7684\u906e\u7f69\u56fe\u7247\u7528\u6cd5\u3002<\/p>\n<h3 id=\"mask-mode\">\u56db\u3001CSS mask-mode\u5c5e\u6027\u8be6\u7ec6\u4ecb\u7ecd<\/h3>\n<p><code>mask-mode<\/code>\u5c5e\u6027\u7684\u9ed8\u8ba4\u503c\u662f<code>match-source<\/code>\uff0c\u610f\u601d\u662f\u6839\u636e\u8d44\u6e90\u7684\u7c7b\u578b\u81ea\u52a8\u91c7\u7528\u5408\u9002\u7684\u906e\u7f69\u6a21\u5f0f\u3002<\/p>\n<p>\u4f8b\u5982\uff0c\u5982\u679c\u6211\u4eec\u7684\u906e\u7f69\u4f7f\u7528\u7684\u662fSVG\u4e2d\u7684<code>&lt;defs&gt;<\/code>\u4e2d\u7684<code>&lt;mask&gt;<\/code>\u5143\u7d20\uff0c\u5219\u6b64\u65f6\u7684<code>mask-mode<\/code>\u5c5e\u6027\u7684\u8ba1\u7b97\u503c\u662f<code>luminance<\/code>\uff0c\u8868\u793a\u57fa\u4e8e\u4eae\u5ea6\u906e\u7f69\u3002\u5982\u679c\u662f\u5176\u4ed6\u573a\u666f\uff0c\u5219\u8ba1\u7b97\u503c\u662f<code>alpha<\/code>\uff0c\u8868\u793a\u57fa\u4e8e\u900f\u660e\u5ea6\u906e\u7f69\u3002<\/p>\n<p>\u56e0\u6b64\uff0c<code>mask-mode<\/code>\u652f\u6301\u4e0b\u97623\u4e2a\u5c5e\u6027\u503c\uff1a<\/p>\n<pre>mask-mode: alpha;\r\nmask-mode: luminance;\r\nmask-mode: match-source;<\/pre>\n<p>\u56e0\u4e3a<code>mask-image<\/code>\u652f\u6301\u591a\u56fe\u7247\uff0c\u56e0\u6b64<code>mask-mode<\/code>\u4e5f\u652f\u6301\u591a\u5c5e\u6027\u503c\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>mask-mode: alpha, match-source;<\/pre>\n<p>\u4f8b\u5982\uff0c\u6211\u4eec\u628a<code>loading.png<\/code>\u906e\u7f69\u6539\u6210\u57fa\u4e8e\u4eae\u5ea6<code>luminance<\/code>\uff0c\u5982\u4e0bCSS\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: url(loading.png);\r\n    mask-image: url(loading.png);\r\n    -webkit-mask-mode: luminance;\r\n    mask-mode: luminance;\r\n}<\/pre>\n<p>\u7ed3\u679cFirefox\u6d4f\u89c8\u5668\u4e0b\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_200719.png\" width=\"310\" height=\"252\" alt=\"\u4f7f\u7528\u4eae\u5ea6\u6a21\u5f0f\u906e\u7f69\u540e\u7684\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p>\u76ee\u524d\uff0c<code>mask-mode<\/code>\u4ec5Firefox\u6d4f\u89c8\u5668\u652f\u6301\uff0c\u56e0\u6b64\uff0cChrome\u6d4f\u89c8\u5668\u662f\u770b\u5230\u7684\u4f9d\u7136\u662f\u57fa\u4e8e<code>alpha<\/code>\u906e\u7f69\u7684\u6548\u679c\uff0c\u989c\u8272\u4e0d\u50cf\u4e0a\u56fe\u90a3\u6837\u6de1\u3002<\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-mode-luminance-png.html\" rel=\"noopener\" target=\"_blank\">mask-mode:luminance\u4e0epng\u56fe\u7247\u906e\u7f69demo<\/a><\/p>\n<h3 id=\"mask-repeat\">\u4e94\u3001mask-repeat\u5c5e\u6027\u8be6\u7ec6\u4ecb\u7ecd<\/h3>\n<p><code>mask-repeat<\/code>\u5c5e\u6027\u7684\u9ed8\u8ba4\u503c\u662f<code>repeat<\/code>\uff0c\u884c\u4e3a\u7c7b\u4f3c\u4e8e<code>background-repeat<\/code>\u5c5e\u6027\u3002<\/p>\n<p>\u652f\u6301\u4ee5\u4e0b\u4e00\u4e9b\u5355\u5c5e\u6027\u503c\uff1a<\/p>\n<pre>mask-repeat: repeat-x;\r\nmask-repeat: repeat-y;\r\nmask-repeat: repeat;\r\nmask-repeat: no-repeat;\r\nmask-repeat: space;\r\nmask-repeat: round;\r\n<\/pre>\n<p>\u540c\u65f6\uff0c\u6839\u636e\u81ea\u5df1\u7684\u6d4b\u8bd5\uff0cChrome\u548cFirefox\u6d4f\u89c8\u5668\u90fd\u652f\u6301x\u8f74y\u8f742\u4e24\u8f74\u540c\u65f6\u8868\u793a\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>mask-repeat: repeat space;\r\nmask-repeat: repeat repeat;\r\nmask-repeat: round space;\r\nmask-repeat: no-repeat round;<\/pre>\n<p>\u7531\u4e8e<code>mask-image<\/code>\u652f\u6301\u591a\u906e\u7f69\u56fe\u7247\uff0c\u56e0\u6b64\uff0c<code>mask-repeat<\/code>\u4e5f\u652f\u6301\u591a\u5c5e\u6027\u503c\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>mask-repeat: space round, no-repeat;\r\nmask-repeat: round repeat, space, repeat-x;<\/pre>\n<p>\u6bcf\u4e2a\u5c5e\u6027\u503c\u7684\u542b\u4e49\u5982\u4e0b\uff1a<\/p>\n<dl>\n<dt>repeat-x<\/dt>\n<dd>\u6c34\u5e73<code>x<\/code>\u5e73\u94fa\uff0c\u6548\u679c\u7c7b\u4f3c\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_205059.png\" width=\"304\" height=\"314\" alt=\"repeat-x\u906e\u7f69\u5e73\u94fa\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/dd>\n<dt>repeat-y<\/dt>\n<dd>\u5782\u76f4<code>y<\/code>\u5e73\u94fa\u3002<\/dd>\n<dt>repeat<\/dt>\n<dd>\u9ed8\u8ba4\u503c\uff0c\u6c34\u5e73\u548c\u5782\u76f4\u5e73\u94fa\u3002<\/dd>\n<dt>no-repeat<\/dt>\n<dd>\u4e0d\u5e73\u94fa\uff0c\u4f1a\u770b\u5230\u5c31\u4e00\u4e2a\u906e\u7f69\u56fe\u5f62\u5b64\u96f6\u96f6\u7684\u6302\u5728\u5de6\u4e0a\u89d2\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_205458.png\" width=\"284\" height=\"286\" alt=\"mask-repeat:no-repeat\u7684\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/dd>\n<dt>space<\/dt>\n<dd><code>space<\/code>\u540c<code>background<\/code>\u7b49\u5c5e\u6027\u4e2d\u7684<code>space<\/code>\uff0c\u8868\u793a\u906e\u7f69\u56fe\u7247\u5c3d\u53ef\u80fd\u7684\u5e73\u94fa\u540c\u65f6\u4e0d\u53d1\u751f\u4efb\u4f55\u526a\u88c1\u3002<\/p>\n<p>\u7136\u800c\u6839\u636e\u6211\u7684\u6d4b\u8bd5\uff0c\u5728Chrome\u6d4f\u89c8\u5668\u4e0b\uff0c\u4e00\u4fa7\u8fb9\u7f18\u8fd8\u662f\u53d1\u751f\u4e86\u526a\u88c1\uff0c\u4e0d\u8fc7\u4e0d\u660e\u663e\u3002Firefox\u6d4f\u89c8\u5668\u5219\u5b8c\u7f8e\u8868\u73b0\u3002<\/dd>\n<dt>round<\/dt>\n<dd><code>round<\/code>\u8868\u793a\u906e\u7f69\u56fe\u7247\u5c3d\u53ef\u80fd\u9760\u5728\u4e00\u8d77\u6ca1\u6709\u4efb\u4f55\u95f4\u9699\uff0c\u540c\u65f6\u4e0d\u53d1\u751f\u4efb\u4f55\u526a\u88c1\u3002\u8fd9\u5c31\u610f\u5473\u7740\u56fe\u7247\u53ef\u80fd\u4f1a\u6709\u6bd4\u4f8b\u7684\u7f29\u653e\u3002<\/dd>\n<\/dl>\n<p>\u5173\u4e8e\u6bcf\u4e2a\u5c5e\u6027\u503c\u7684\u5177\u4f53\u8868\u73b0\uff0c\u6211\u7279\u610f\u505a\u4e86\u4e00\u4e2ademo\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u7684\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-repeat-png.html\" rel=\"noopener\" target=\"_blank\">mask-repeat\u4e0d\u540c\u5c5e\u6027\u503c\u4e0e\u906e\u7f69\u6548\u679cdemo<\/a><\/p>\n<p>\u4f8b\u5982\u6211\u4eec\u9009\u62e9<code>mask-repeat<\/code>\u4e3a<code>round<\/code>\uff0c\u5219\u906e\u7f69\u6548\u679c\u5c31\u53d8\u6210\u8fd9\u6837\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_210322.png\" width=\"305\" height=\"301\" alt=\"mask-repeat\u53d8\u6210round\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<h3 id=\"mask-position\">\u516d\u3001mask-position\u5c5e\u6027\u8be6\u7ec6\u4ecb\u7ecd<\/h3>\n<p><code>mask-position<\/code>\u548c<code>background-position<\/code>\u652f\u6301\u7684\u5c5e\u6027\u503c\u548c\u8868\u73b0\u57fa\u672c\u4e0a\u90fd\u662f\u4e00\u6a21\u4e00\u6837\u7684\u3002<\/p>\n<p>\u4f8b\u5982\uff0c<code>mask-position<\/code>\u9ed8\u8ba4\u8ba1\u7b97\u503c\u662f<code>0% 0%<\/code>\uff0c\u4e5f\u5c31\u662f\u76f8\u5bf9\u5de6\u4e0a\u89d2\u5b9a\u4f4d\u3002<\/p>\n<p>\u652f\u6301\u5355\u4e2a\u5173\u952e\u5b57\uff08\u7f3a\u7701\u5173\u952e\u5b57\u7684\u89e3\u6790\u4e3a<code>center<\/code>\uff09\uff1a<\/p>\n<pre>mask-position: top;\r\nmask-position: bottom;\r\nmask-position: left;\r\nmask-position: right;\r\nmask-position: center;<\/pre>\n<p>\u652f\u6301\u5782\u76f4\u548c\u6c34\u5e73\u65b9\u5411\u4e24\u4e2a\u5173\u952e\u5b57\uff1a<\/p>\n<pre>mask-position: right top;<\/pre>\n<p>\u652f\u6301\u5404\u7c7b\u6570\u503c\uff1a<\/p>\n<pre>mask-position: 30% 50%;<\r\nmask-position: 10px 5rem;<\/pre>\n<p>\u7531\u4e8e<code>mask-image<\/code>\u652f\u6301\u591a\u906e\u7f69\u56fe\u7247\uff0c\u56e0\u6b64\uff0c<code>mask-position<\/code>\u4e5f\u652f\u6301\u591a\u5c5e\u6027\u503c\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>mask-position: 0 0, center;<\/pre>\n<p>Chrome\u548cFirefox\u6d4f\u89c8\u5668\u90fd\u652f\u6301<code>mask-position<\/code>\u5c5e\u6027\uff0cChrome\u8fd8\u9700\u8981<code>-webkit-<\/code>\u79c1\u6709\u524d\u7f00\uff0cFirefox\u6d4f\u89c8\u5668\u73b0\u5728\u5df2\u7ecf\u4e0d\u9700\u8981\u4e86\u3002<\/p>\n<p>\u4e3a\u4e86\u76f4\u89c2\u4f53\u9a8c\u4e0d\u540c<code>mask-position<\/code>\u5c5e\u6027\u503c\u7684\u906e\u7f69\u6548\u679c\uff0c\u6211\u7279\u610f\u505a\u4e86\u4e2a\u53ef\u4ea4\u4e92\u7684demo\u9875\u9762\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u7684\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-position-png.html\" rel=\"noopener\" target=\"_blank\">mask-position\u4e0d\u540c\u5c5e\u6027\u503c\u4e0e\u906e\u7f69\u6548\u679cdemo<\/a><\/p>\n<p>\u4f8b\u5982\uff0c\u5728<code>mask-repeat<\/code>\u503c\u4e3a<code>no-repeat<\/code>\u524d\u63d0\u4e0b\uff0c\u6211\u4eec\u9009\u62e9\u5c5e\u6027\u503c\u4e3a<code>top<\/code>\uff0c\u5219\u906e\u7f69\u6548\u679c\u8868\u73b0\u4e3a\u9876\u90e8\u5c45\u4e2d\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_211833.png\" width=\"336\" height=\"346\" alt=\"mask-position\u9876\u90e8\u5c45\u4e2d\u6548\u679c\" class=\"alignnone\" \/><\/p>\n<h3 id=\"mask-clip\">\u4e03\u3001mask-clip\u5c5e\u6027\u8be6\u7ec6\u4ecb\u7ecd<\/h3>\n<p><code>mask-clip<\/code>\u5c5e\u6027\u6027\u8d28\u4e0a\u548c<code>background-clip<\/code>\u7c7b\u4f3c\uff0c\u4f46\u662f<code>mask-clip<\/code>\u652f\u6301\u7684\u5c5e\u6027\u503c\u8981\u591a\u4e00\u70b9\uff0c\u4e3b\u8981\u662f\u591a\u4e86\u4e2aSVG\u5143\u7d20\u7684<code>mask-clip<\/code>\u652f\u6301\u3002<\/p>\n<p>\u652f\u6301\u5c5e\u6027\u503c\u5982\u4e0b\uff1a<\/p>\n<pre>mask-clip: content-box;\r\nmask-clip: padding-box;\r\nmask-clip: border-box;\r\nmask-clip: fill-box;\r\nmask-clip: stroke-box;\r\nmask-clip: view-box;\r\n\r\nmask-clip: no-clip;<\/pre>\n<p>\u5176\u4e2d\u9ed8\u8ba4\u503c\u662f<code>border-box<\/code>\u548c<code>background-clip<\/code>\u7c7b\u4f3c\u3002\u540c\u6837\u4e5f\u652f\u6301\u591a\u5c5e\u6027\u503c\uff1a<\/p>\n<pre>mask-clip: content-box, border-box;<\/pre>\n<p>\u867d\u7136\u652f\u6301\u7684\u5c5e\u6027\u503c\u633a\u591a\uff0c\u4f46\u662f\u5bf9\u4e8e\u666e\u901a\u5143\u7d20\u800c\u8a00\uff0c\u751f\u6548\u7684\u5176\u5b9e\u5c31\u524d\u97623\u4e2a\uff0cFirefox\u6d4f\u89c8\u5668\u8fd8\u652f\u6301<code>no-clip<\/code>\uff0c\u8868\u793a\u4e0d\u5bf9\u5143\u7d20\u7684\u906e\u7f69\u6548\u679c\u505a\u533a\u57df\u4e0a\u7684\u9650\u5236\uff0c\u8a00\u5916\u4e4b\u610f\u5c31\u662f\u53ea\u8981\u662f\u5143\u7d20\u8eab\u4e0a\u201c\u957f\u51fa\u6765\u201d\u7684\u4e1c\u897f\uff0c\u90fd\u53ef\u4ee5\u5e94\u7528\u906e\u7f69\u6548\u679c\u3002<\/p>\n<p>\u4f8b\u5982<code>outline<\/code>\u8f6e\u5ed3\uff0c\u53c8\u4f8b\u5982<code>box-shadow<\/code>\u76d2\u9634\u5f71\uff0c\u90fd\u662f\u53ef\u4ee5\u5e94\u7528\u906e\u7f69\u6548\u679c\u7684\u3002<\/p>\n<p>\u505a\u4e86\u4e2ademo\uff0c\u6f14\u793a\u4e0d\u540c<code>mask-clip<\/code>\u5c5e\u6027\u503c\u7684\u4e0d\u540c\u8868\u73b0\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u7684\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-clip-png.html\" rel=\"noopener\" target=\"_blank\">mask-clip\u4e0d\u540c\u5c5e\u6027\u503c\u4e0e\u906e\u7f69\u6548\u679cdemo<\/a><\/p>\n<p>\u4f8b\u5982\uff0c\u5df2\u77e5CSS\u5982\u4e0b\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: url(loading.png);\r\n    mask-image: url(loading.png);\r\n    border: 20px solid #34538b;\r\n    padding: 20px;\r\n    margin: 20px;\r\n}<\/pre>\n<p>\u5219\u6211\u4eec\u9009\u62e9<code>content-box<\/code>\u6548\u679c\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_214050.png\" width=\"384\" height=\"415\" alt=\"mask-clip content-box\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p><code>fill-box<\/code>\uff0c<code>stroke-box<\/code>\uff0c<code>view-box<\/code>\u8981\u4e0eSVG\u5143\u7d20\u5173\u8054\u624d\u6709\u6548\u679c\uff0c<del datetime=\"2020-07-25T16:35:17+00:00\">\u76ee\u524d\u8fd8\u6ca1\u6709\u4efb\u4f55\u6d4f\u89c8\u5668\u5bf9\u5176\u8fdb\u884c\u652f\u6301<\/del> \u66f4\u65b0\u4e8e2020-07-26 Firefox\u6d4f\u89c8\u5668\u652f\u6301\u4e86\u8fd93\u4e2a\u5173\u952e\u5b57\uff0c\u53cd\u800c\u662fChrome\u6d4f\u89c8\u5668\u8fdf\u8fdf\u672a\u652f\u6301\u3002<\/p>\n<h3 id=\"mask-origin\">\u516b\u3001mask-origin\u5c5e\u6027\u8be6\u7ec6\u4ecb\u7ecd<\/h3>\n<p><code>mask-origin<\/code>\u5c5e\u6027\u6027\u8d28\u4e0a\u548c<code>background-origin<\/code>\u7c7b\u4f3c\uff0c\u4f46\u662f<code>mask-origin<\/code>\u652f\u6301\u7684\u5c5e\u6027\u503c\u8981\u591a\u4e00\u70b9\uff0c\u4e3b\u8981\u662f\u591a\u4e86\u4e2aSVG\u5143\u7d20\u7684<code>mask-origin<\/code>\u652f\u6301\u3002<\/p>\n<p>\u652f\u6301\u5c5e\u6027\u503c\u5982\u4e0b\uff1a<\/p>\n<pre>mask-origin: content-box;\r\nmask-origin: padding-box;\r\nmask-origin: border-box;\r\nmask-origin: fill-box;\r\nmask-origin: stroke-box;\r\nmask-origin: view-box;<\/pre>\n<p>\u5176\u4e2d\u9ed8\u8ba4\u503c\u662f<code>border-box<\/code>\u548c<code>background-origin<\/code>\u7c7b\u4f3c\u3002\u540c\u6837\u4e5f\u652f\u6301\u591a\u5c5e\u6027\u503c\uff1a<\/p>\n<pre>mask-origin: content-box, border-box;<\/pre>\n<p>\u867d\u7136\u652f\u6301\u7684\u5c5e\u6027\u503c\u633a\u591a\uff0c\u4f46\u662f\u5bf9\u4e8e\u666e\u901a\u5143\u7d20\u800c\u8a00\uff0c\u76ee\u524d\u751f\u6548\u7684\u5176\u5b9e\u5c31\u524d\u97623\u4e2a\u3002<\/p>\n<p>\u505a\u4e86\u4e2ademo\uff0c\u6f14\u793a\u4e0d\u540c<code>mask-origin<\/code>\u5c5e\u6027\u503c\u7684\u4e0d\u540c\u8868\u73b0\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u7684\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-origin-png.html\" rel=\"noopener\" target=\"_blank\">mask-clip\u4e0d\u540c\u5c5e\u6027\u503c\u4e0e\u906e\u7f69\u6548\u679cdemo<\/a><\/p>\n<p>\u4f8b\u5982\uff0c\u5df2\u77e5CSS\u5982\u4e0b\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: url(loading.png);\r\n    mask-image: url(loading.png);\r\n    border: 20px solid #34538b;\r\n    padding: 20px;\r\n    margin: 20px;\r\n}<\/pre>\n<p>\u5219\u6211\u4eec\u9009\u62e9<code>content-box<\/code>\u6548\u679c\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_215003.png\" width=\"352\" height=\"417\" alt=\"mask-origin\u9009\u62e9content-box\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p><code>fill-box<\/code>\uff0c<code>stroke-box<\/code>\uff0c<code>view-box<\/code>\u8981\u4e0eSVG\u5143\u7d20\u5173\u8054\u624d\u6709\u6548\u679c\uff0c\u76ee\u524d\u8fd8\u6ca1\u6709\u4efb\u4f55\u6d4f\u89c8\u5668\u5bf9\u5176\u8fdb\u884c\u652f\u6301\u3002<\/p>\n<h3 id=\"mask-size\">\u4e5d\u3001mask-size\u5c5e\u6027\u8be6\u7ec6\u4ecb\u7ecd<\/h3>\n<p><code>mask-size<\/code>\u5c5e\u6027\u6027\u8d28\u4e0a\u548c<code>background-size<\/code>\u7c7b\u4f3c\uff0c\u652f\u6301\u7684\u5c5e\u6027\u503c\u4e5f\u7c7b\u4f3c\uff0c\u4f5c\u7528\u662f\u63a7\u5236\u906e\u7f69\u56fe\u7247\u5c3a\u5bf8\u3002<\/p>\n<p>\u9ed8\u8ba4\u503c\u662f<code>auto<\/code>.<\/p>\n<p>\u652f\u6301<code>contain<\/code>\u548c<code>cover<\/code>\u8fd9\u4e24\u4e2a\u5173\u952e\u5b57\uff1a<\/p>\n<pre>mask-size: cover;\r\nmask-size: contain;<\/pre>\n<p>\u652f\u6301\u5404\u7c7b\u6570\u503c\uff08\u7f3a\u7701\u9ad8\u5ea6\u4f1a\u81ea\u52a8\u8ba1\u7b97\u4e3a<code>auto<\/code>\uff09\uff1a<\/p>\n<pre>mask-size: 50%;\r\nmask-size: 3em;\r\nmask-size: 12px;\r\n\r\nmask-size: 50% auto;\r\nmask-size: 3em 25%;\r\nmask-size: auto 6px;<\/pre>\n<p>\u540c\u6837\u652f\u6301\u591a\u5c5e\u6027\u503c\uff1a<\/p>\n<pre>mask-size: 50%, 25%, 25%;\r\nmask-size: 6px, auto, contain;<\/pre>\n<p>\u6548\u679c\u6f14\u793a\uff0c\u5982\u4e0bCSS\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: url(star.svg);\r\n    mask-image: url(star.svg);\r\n    -webkit-mask-size: cover;\r\n    mask-image: cover;\r\n}<\/pre>\n<p>\u7ed3\u679c\u6548\u679c\u5982\u4e0b\u56fe\uff08Chrome\u548cFirefox\u6d4f\u89c8\u5668\u5747\u5982\u6b64\uff09\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_215901.png\" width=\"335\" height=\"315\" alt=\"mask-size:cover\u906e\u7f69\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-size-cover-png.html\" rel=\"noopener\" target=\"_blank\">mask-size:cover\u4e0e\u56fe\u7247\u906e\u7f69\u6548\u679cdemo<\/a><\/p>\n<h3 id=\"mask-type\">\u5341\u3001mask-type\u5c5e\u6027\u7b80\u4ecb<\/h3>\n<p><code>mask-type<\/code>\u5c5e\u6027\u529f\u80fd\u4e0a\u548c<code>mask-mode<\/code>\u7c7b\u4f3c\uff0c\u90fd\u662f\u8bbe\u7f6e\u4e0d\u540c\u7684\u906e\u7f69\u6a21\u5f0f\u3002\u4f46\u8fd8\u662f\u6709\u4e2a\u5f88\u5927\u7684\u533a\u522b\uff0c\u90a3\u5c31\u662f<code>mask-type<\/code>\u53ea\u80fd\u4f5c\u7528\u5728SVG\u5143\u7d20\u4e0a\uff0c\u672c\u8d28\u4e0a\u662f\u7531SVG\u5c5e\u6027\u6f14\u53d8\u800c\u6765\uff0c\u56e0\u6b64\uff0cChrome\u7b49\u6d4f\u89c8\u5668\u90fd\u662f\u652f\u6301\u7684\u3002\u4f46\u662f<code>mask-mode<\/code>\u662f\u4e00\u4e2a\u9488\u5bf9\u6240\u6709\u5143\u7d20\u7684CSS3\u5c5e\u6027\uff0cChrome\u7b49\u6d4f\u89c8\u5668\u5e76\u4e0d\u652f\u6301\uff0c\u76ee\u524d\u4ec5Firefox\u6d4f\u89c8\u5668\u652f\u6301\u3002<\/p>\n<p>\u7531\u4e8e\u53ea\u80fd\u4f5c\u7528\u5728SVG\u5143\u7d20\u4e0a\uff0c\u56e0\u6b64\u9ed8\u8ba4\u503c\u8868\u73b0\u4e3aSVG\u5143\u7d20\u9ed8\u8ba4\u906e\u7f69\u6a21\u5f0f\uff0c\u4e5f\u5c31\u662f\u9ed8\u8ba4\u503c\u662f<code>luminance<\/code>\uff0c\u4eae\u5ea6\u906e\u7f69\u6a21\u5f0f\u3002\u5982\u679c\u9700\u8981\u652f\u6301\u900f\u660e\u5ea6\u906e\u7f69\u6a21\u5f0f\uff0c\u53ef\u4ee5\u8fd9\u4e48\u8bbe\u7f6e\uff1a<\/p>\n<pre>mask-type: alpha;<\/pre>\n<h3 id=\"mask-composite\">\u5341\u4e00\u3001mask-composite\u5c5e\u6027\u8be6\u7ec6\u4ecb\u7ecd<\/h3>\n<p><code>mask-composite<\/code>\u8868\u793a\u5f53\u540c\u65f6\u4f7f\u7528\u591a\u4e2a\u56fe\u7247\u8fdb\u884c\u906e\u7f69\u65f6\u5019\u7684\u6df7\u5408\u65b9\u5f0f\u3002\u652f\u6301\u5c5e\u6027\u503c\u5305\u62ec\uff1a<\/p>\n<pre>mask-composite: add;\r\nmask-composite: subtract;\r\nmask-composite: intersect;\r\nmask-composite: exclude;<\/pre>\n<p>\u4ee5\u4e0a\u5c5e\u6027\u503c\uff0c\u76ee\u524d\u4ec5Firefox\u6d4f\u89c8\u5668\u652f\u6301\uff0cChrome\u9ed8\u8ba4<code>mask-composite<\/code>\u8ba1\u7b97\u503c\u662f<code>source-over<\/code>\uff0c\u548c\u6807\u51c6\u9ed8\u8ba4\u503c<code>add<\/code>\u6709\u4e9b\u5dee\u5f02\uff0c\u4f5c\u7528\u662f\u4e00\u6837\u7684\uff0c\u8868\u793a\u591a\u4e2a\u56fe\u7247\u906e\u7f69\u6548\u679c\u662f\u7d2f\u52a0\u3002<\/p>\n<p>\u5404\u5c5e\u6027\u503c\u91ca\u4e49\u5982\u4e0b\uff1a<\/p>\n<dl>\n<dt>add<\/dt>\n<dd>\u906e\u7f69\u7d2f\u52a0\u3002<\/dd>\n<dt>subtract<\/dt>\n<dd>\u906e\u7f69\u76f8\u51cf\u3002\u4e5f\u5c31\u662f\u906e\u7f69\u56fe\u7247\u91cd\u5408\u7684\u5730\u65b9\u4e0d\u663e\u793a\u3002\u610f\u5473\u7740\u906e\u7f69\u56fe\u7247\u8d8a\u591a\uff0c\u906e\u7f69\u533a\u57df\u8d8a\u5c0f\u3002<\/dd>\n<dt>intersect<\/dt>\n<dd>\u906e\u7f69\u76f8\u4ea4\u3002\u4e5f\u5c31\u662f\u906e\u7f69\u56fe\u7247\u91cd\u5408\u7684\u5730\u65b9\u624d\u663e\u793a\u906e\u7f69\uff0c\u3002<\/dd>\n<dt>exclude<\/dt>\n<dd>\u906e\u7f69\u6392\u9664\u3002\u4e5f\u5c31\u662f\u540e\u9762\u906e\u7f69\u56fe\u7247\u91cd\u5408\u7684\u5730\u65b9\u6392\u9664\uff0c\u5f53\u4f5c\u900f\u660e\u5904\u7406\u3002<\/dd>\n<\/dl>\n<p>\u4e3a\u4e86\u6f14\u793a\u4e0d\u540c<code>mask-composite<\/code>\u5c5e\u6027\u503c\u7684\u4e0d\u540c\u8868\u73b0\uff0c\u7279\u610f\u505a\u4e86\u4e2a\u53ef\u4ea4\u4e92\u7684demo\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u7684\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/study\/201711\/mask-composite-png.html\" rel=\"noopener\" target=\"_blank\">mask-composite\u4e0d\u540c\u5c5e\u6027\u503c\u4e0e\u906e\u7f69\u6548\u679cdemo<\/a><\/p>\n<p>demo\u4f7f\u7528CSS\u4ee3\u7801\uff1a<\/p>\n<pre>.mask-image {\r\n    width: 250px; height: 187.5px;\r\n    -webkit-mask-image: url(loading.png), url(star.svg);\r\n    mask-image: url(loading.png), url(star.svg);\r\n}<\/pre>\n<p>\u4f8b\u5982\uff0cFirefox\u6d4f\u89c8\u5668\u4e0b\uff0c\u9009\u62e9<code>mask-composite:subtract<\/code>\uff0c\u5219\u6548\u679c\u5982\u4e0b\u622a\u56fe\u6240\u793a\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201711\/2017-11-12_222342.png\" width=\"302\" height=\"300\" alt=\"mask-composite:subtract\u906e\u7f69\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p><strong>\u66f4\u65b0\u4e8e2019-03-21<\/strong><br \/>\nChrome\u6d4f\u89c8\u5668<code>mask-composite<\/code>\u652f\u6301\u7684\u5c5e\u6027\u503c\u6709\u53d8\u5316\uff0c\u5982\u4e0b\uff1a<\/p>\n<pre>mask-composite:source-over;\r\nmask-composite:source-in;\r\nmask-composite:source-out;\r\nmask-composite:source-atop;\r\nmask-composite:destination-over;\r\nmask-composite:destination-in;\r\nmask-composite:destination-out;\r\nmask-composite:destination-atop;\r\nmask-composite:plus-lighter;\r\nmask-composite:copy;\r\nmask-composite:clear;\r\nmask-composite:xor;<\/pre>\n<p>\u793a\u610f\u56fe\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201903\/2019-03-21_200405.png\" width=\"364\" height=\"311\" alt=\"Chrome\u6d4f\u89c8\u5668mask-composite\u652f\u6301\u7684\u5c5e\u6027\u503c\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u501f\u9274\u4e86Canvas\u4e2d\u7684<code>globalCompositeOperation<\/code>\u5c5e\u6027\u503c\uff0c\u5404\u4e2a\u5c5e\u6027\u503c\u8be6\u7ec6\u4f5c\u7528\u53ef\u4ee5<a href=\"https:\/\/www.canvasapi.cn\/CanvasRenderingContext2D\/globalCompositeOperation\" rel=\"noopener\" target=\"_blank\" class=\"a_link\">\u70b9\u51fb\u8fd9\u91cc<\/a>\u3002<\/p>\n<p>\u7b80\u5355\u63cf\u8ff0\u4e0b\u5c5e\u6027\u503c\u4f5c\u7528\uff1a<\/p>\n<dl>\n<dt>source-over<\/dt>\n<dd>\u906e\u7f69\u7d2f\u52a0\u3002<\/dd>\n<dt>source-in<\/dt>\n<dd>\u91cd\u53e0\u7684\u4f4d\u7f6e\u662f\u906e\u7f69\uff0c\u4e0d\u91cd\u53e0\u7684\u4f4d\u7f6e\u8868\u73b0\u4e3a\u900f\u660e\u3002<\/dd>\n<dt>source-out<\/dt>\n<dd>\u91cd\u53e0\u7684\u4f4d\u7f6e\u662f\u4e0d\u906e\u7f69\uff0c\u8868\u73b0\u4e3a\u900f\u660e\u3002<\/dd>\n<dt>source-atop<\/dt>\n<dd>\u7565\u3002\u53c2\u89c1<a href=\"https:\/\/www.canvasapi.cn\/CanvasRenderingContext2D\/globalCompositeOperation\" rel=\"noopener\" target=\"_blank\">\u8fd9\u4e2a\u94fe\u63a5<\/a>\u3002\u5269\u4f59\u51e0\u4e2a\u5c5e\u6027\u503c\u4e5f\u7565\uff0c\u5185\u5bb9\u592a\u591a\uff0c\u8fd9\u91cc\u4e0d\u65b9\u4fbf\u5c55\u5f00\u2026\u2026<\/dd>\n<dt>\u7565...<\/dt>\n<dd>\u7565...<\/dd>\n<\/dl>\n<h3>\u5341\u4e8c\u3001\u8bf4\u4e66\u7ed3\u675f<\/h3>\n<p>\u7ec8\u4e8e\u8bf4\u4e66\u7ed3\u675f\u4e86\uff0c\u5f20\u695a\u5c9a\u610f\u72b9\u672a\u5c3d\uff0c\u756a\u8304\u9e21\u86cb\u6c64\u4e5f\u90fd\u5fd8\u8bb0\u5403\u5df2\u7ecf\u51c9\u4e86\uff0c\u8fde\u5fd9\u72fc\u541e\u864e\u54bd\u5403\u5b8c\uff0c\u7136\u540e\u8ba9\u5c0f\u4e8c\u4e70\u5355\u3002<\/p>\n<p>\u5c0f\u4e8c\u8fc7\u6765\u4e00\u770b\uff0c\u7565\u6709\u4e0d\u60a6\uff1a\u201c\u5ba2\u5b98\uff0c\u4f60\u5c31\u4e0d\u518d\u70b9\u7684\u4ec0\u4e48\uff1f\u201d<\/p>\n<p>\u201c\u4e0d\u662f\u6211\u4e0d\u60f3\u70b9\uff0c\u8fd9\u6c64\u51c9\u4e86\uff0c\u6211\u559d\u4e0b\u53bb\u5c31\u6ca1\u6709\u5403\u5176\u4ed6\u4e1c\u897f\u7684\u80c3\u53e3\u4e86\u3002\u5c31\u8fd9\u6837\u4e70\u5355\u5427~\u201d\u5f20\u695a\u5c9a\u563f\u563f\u4e00\u7b11\u3002<\/p>\n<p>\u201c\u8fd9\u2026\u2026\uff0c\u5c0f\u4e8c\u72b9\u8c6b\u4e86\u4e0b\uff0c\u6211\u53bb\u95ee\u95ee\u8001\u677f\u5a18\u2026\u2026\u201d<\/p>\n<p>\u201c\u54a6\uff1f\u201d\u5f20\u695a\u5c9a\u89c9\u5f97\u6709\u4e9b\u4e0d\u5bf9\u52b2\uff0c\u60f3\u64a4\u3002\u6b63\u8d77\u8eab\uff0c\u7a81\u7136\u95e8\u5916\u8e7f\u51fa\u4e94\u5927\u4e09\u9ed1\u6570\u4eba\u5c06\u5f20\u695a\u5c9a\u56e2\u56e2\u56f4\u4f4f\u3002\u201c\u5c0f\u5b50\uff0c\u4f60\u5403\u8fd9\u4e48\u70b9\u4e1c\u897f\u4e5f\u60f3\u8d70\uff0c\u4f60\u542c\u4e86\u5b8c\u6574\u7684\u8bf4\u4e66\u53ef\u662f\u6709\u81f3\u5c11100\u5143\u7684\u6700\u4f4e\u6d88\u8d39\uff0c\u5feb\u4ea4\u94b1\uff0c\u4e0d\u7136\u53ef\u522b\u602a\u6211\u62f3\u5934\u4e0d\u957f\u773c\u775b\u201d\u3002<\/p>\n<p>\u6c14\u6c1b\u987f\u65f6\u5f02\u5e38\u7d27\u5f20\uff0c\u5f20\u695a\u5c9a\u7422\u78e8\uff0c\u81ea\u5df1\u8eab\u4e0a\u603b\u517143\u51438\u89d2\uff0c\u538b\u6839\u4e0d\u591f\u5403\u996d\u8d39\u7528\u3002\u770b\u6765\u53ea\u80fd\u5f3a\u7a81\u4e86\u3002\u4e8e\u662f\u6307\u7740\u8bf4\u4e66\u65b9\u5411\u5927\u53eb\uff1a\u201c\u8001\u677f\u5a18\uff0c\u662f\u6211\u554a\uff01\u201d\u4f17\u4eba\u4e0d\u7981\u8f6c\u5934\u671b\u53bb\uff0c\u5f20\u695a\u5c9a\u7acb\u9a6c\u53d1\u52a8\u96f7\u8bc0\uff0c\u95ea\u5230\u95e8\u5916\u3002\u672c\u4ee5\u4e3a\u5df2\u7ecf\u9003\u8d70\uff0c\u7a81\u7136\u770b\u5230\u4e24\u6307\u76f4\u903c\u81ea\u5df1\u80f8\u524d\uff0c\u540c\u65f6\u4f20\u6765\u58f0\u97f3\u201c\u8475\u82b1\u70b9\u7a74\u624b\u201d\uff0c\u773c\u770b\u5373\u5c06\u51fb\u4e2d\uff0c\u5f20\u695a\u5c9a\u4e00\u8fd0\u529b\uff0c\u4f7f\u51fa\u96f7\u8bc0\u4e09\u9636\u96f7\u6b65\uff0c\u4e00\u4e2a\u534a\u8f6c\u8eab\uff0c\u624b\u6307\u64e6\u7740\u8863\u670d\u800c\u8fc7\uff0c\u597d\u9669\u3002\u5b9a\u775b\u4e00\u770b\uff0c\u539f\u6765\u662f\u521a\u624d\u7684\u5c0f\u4e8c\uff0c\u4ece\u521a\u624d\u8fc7\u62db\u53ef\u4ee5\u770b\u51fa\u6b64\u4eba\u6b66\u529f\u4e0d\u83f2\uff0c\u770b\u6765\u6b64\u5ba2\u6808\u662f\u85cf\u9f99\u5367\u864e\u4e4b\u5730\u4e0d\u5b9c\u4e45\u7559\u3002\u4e8e\u662f\uff0c\u5f20\u695a\u5c9a\u4e00\u6478\u53e3\u888b\uff0c\u6254\u5411\u5c0f\u4e8c\uff0c\u540c\u65f6\u53eb\u9053\uff0c\u8fd9\u662f\u4f60\u4eec\u8981\u7684100\u5143\u3002\u5c0f\u4e8c\u4e0b\u610f\u8bc6\u62ff\u624b\u53bb\u63a5\u4f4f\uff0c\u518d\u56de\u5934\uff0c\u5f20\u695a\u5c9a\u5df2\u4f7f\u7528\u96f7\u8bc0\u9003\u5230\u6ca1\u5f71\u5b50\u4e86\u3002<\/p>\n<p>\u201c\u542d\uff0c\u7b97\u4f60\u8dd1\u5f97\u5feb\uff01\u201d\u5c0f\u4e8c\u51b7\u542d\u5230\u3002\u7136\u540e\u5f20\u5f00\u624b\u770b\u63a5\u4f4f\u7684\u94b1\uff0c\u4e00\u53e3\u8001\u8840\u5410\u51fa\u6765\uff0c\u53ea\u670910\u5757\u94b1\uff0c\u62f3\u5934\u7d27\u63e1\uff0c\u4f4e\u58f0\u6012\u543c\u9053\uff0c\u201c\u5c0f\u5b50\uff0c\u4e0b\u6b21\u518d\u9047\u5230\u6211\u76d7\u795e\uff0c\u5fc5\u8981\u4f60\u5403\u4e0d\u4e86\u515c\u7740\u8d70\uff01\u201d<\/p>\n<hr>\n<p>\u81f3\u6b64\u672c\u6587\u5168\u90e8\u7ed3\u675f\uff0c\u5e0c\u671b\u672c\u6587\u7684\u5185\u5bb9\u80fd\u591f\u5bf9\u60a8\u7684\u5b66\u4e60\u6709\u6240\u5e2e\u52a9\u3002\u53e6\u5916\uff0c\u884c\u6587\u5306\u5fd9\uff0c\u6709\u9519\u8bef\u5728\u6240\u96be\u514d\uff0c\u6b22\u8fce\u7ea0\u6b63\u3002<\/p>\n<p>\u672c\u6587\u6709\u53c2\u8003MDN\u6587\u6863\uff1a<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/mask\" rel=\"noopener\" target=\"_blank\">CSS\/mask<\/a><\/p>\n<p>\u611f\u8c22\u82b1\u8fd9\u4e48\u591a\u65f6\u95f4\u9605\u8bfb\uff01<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201611\/14.png\" align=\"absmiddle\"><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=6513\">http:\/\/www.zhangxinxu.com\/wordpress\/?p=6513<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS mask\u906e\u7f69\u5c5e\u6027\u76ee\u524d\u9664\u4e86IE\u548cEdge\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\uff0cFirefox\uff0cChrome\u4ee5\u53ca\u79fb\u52a8\u7aef\u7b49\u90fd\u5df2\u7ecf\u5168\u7ebf\u652f\u6301\uff0c\u5176\u5b9e\u9645\u5e94\u7528\u4ef7\u503c\u5df2\u4e0d\u53ef\u540c\u65e5\u800c\u8bed\u3002\u5c24\u5176Firefox\u6d4f\u89c8\u5668\uff0c\u4ece\u7248\u672c55\u5f00\u59cb\uff0c\u5df2\u7ecf\u5168\u9762\u652f\u6301\u4e86CSS3 mask\u5c5e\u6027\u3002\u5e76\u4e14mask\u5c5e\u6027\u89c4\u8303\u5df2\u7ecf\u8fdb\u5165\u5019\u9009\u63a8\u8350\u89c4\u8303\u4e4b\u5217\uff0c\u4f1a\u8bf4\u4ee5\u540e\u8fdb\u5165\u65e2\u5b9a\u89c4\u8303\u6807\u51c6\u5df2\u7ecf\u662f\u677f\u4e0a\u9489\u9489\u7684\u4e8b\u60c5\uff0c\u5927\u5bb6\u53ef\u4ee5\u653e\u5fc3\u5b66\u4e60\uff0c\u5c06\u6765\u5fc5\u6709\u7528\u5904\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":[177,1078,1182,1188,1183,1184,1185,1186,1187,1189,104],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/6513"}],"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=6513"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/6513\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=6513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=6513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=6513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}