1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[7278],{57313:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>r,default:()=>h,frontMatter:()=>c,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"id":"day_series/02-2024_ithome/day_10","title":"Day 10 - \u5716\u7247\u906e\u7f69\u6548\u679c","description":"\u5728\u6211\u5011\u958b\u59cb\u4e4b\u524d\uff0c\u6211\u5011\u5148\u4f86\u770b\u9019\u5169\u5f35\u5716\uff1a","source":"@site/docs/30_day_series/02-2024_ithome/11-day_10.mdx","sourceDirName":"30_day_series/02-2024_ithome","slug":"/day_series/02-2024_ithome/day_10","permalink":"/docs/day_series/02-2024_ithome/day_10","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":11,"frontMatter":{"title":"Day 10 - \u5716\u7247\u906e\u7f69\u6548\u679c"},"sidebar":"thirtySeriesSidebar","previous":{"title":"Day 09 - \u6f38\u8b8a\u80cc\u666f\u52d5\u756b","permalink":"/docs/day_series/02-2024_ithome/day_09"},"next":{"title":"Day 11 - \u6f38\u8b8a\u6587\u5b57\u6548\u679c","permalink":"/docs/day_series/02-2024_ithome/day_11"}}');var i=n(74848),o=n(28453);const c={title:"Day 10 - \u5716\u7247\u906e\u7f69\u6548\u679c"},r=void 0,a={},d=[{value:"\u53c3\u8003\u8cc7\u6599",id:"\u53c3\u8003\u8cc7\u6599",level:2}];function l(e){const s={a:"a",br:"br",code:"code",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["\u5728\u6211\u5011\u958b\u59cb\u4e4b\u524d\uff0c\u6211\u5011\u5148\u4f86\u770b\u9019\u5169\u5f35\u5716\uff1a",(0,i.jsx)(s.br,{}),"\n",(0,i.jsx)(s.img,{alt:"CodeFictionist logo",src:n(36671).A+"",width:"675",height:"540"}),(0,i.jsx)(s.br,{}),"\n",(0,i.jsx)(s.img,{src:"https://i.postimg.cc/bJs0ZYPS/DSC-1027.jpg",alt:"\u7409\u7483\u5149\u82d1"})]}),"\n",(0,i.jsxs)(s.p,{children:["Well\uff0c\u4e5f\u8a31\u4f60\u6703\u8aaa\uff0c\u9019\u6709\u5565\u7279\u5225\u7684\uff0c\u4e0d\u5c31\u4e00\u500b\u500b\u4eba\u90e8\u843d\u683c\u7684 logo \u8ddf\u4e00\u5f35\u524d\u5e7e\u5929\u4e5f\u4e00\u76f4\u51fa\u73fe\u7684\u7167\u7247\u55ce\uff1f(os: \u5230\u5e95\u662f\u591a\u611b\u7409\u7483\u5149\u82d1)",(0,i.jsx)(s.br,{}),"\n","\u7576\u4f60\u6709\u9019\u60f3\u6cd5\uff0c\u90a3\u6162\u8457\uff0c\u6211\u5011\u4f86\u770b\u770b\u9019\u5f35\u5716\uff1a"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.img,{alt:"CodeFictionist logo with mask",src:n(60573).A+"",width:"453",height:"301"}),(0,i.jsx)(s.br,{}),"\n",(0,i.jsx)(s.a,{href:"https://codepen.io/ChungYingHo/pen/vYqdvwE",children:"CodePen \u7bc4\u4f8b"})]}),"\n",(0,i.jsxs)(s.p,{children:["\u54c7~\u6709\u6c92\u6709\uff0c\u539f\u5148\u7070\u767d\u8272\u7684 logo \u7a81\u7136\u5e95\u8272\u8b8a\u6210\u7409\u7483\u5149\u82d1\u7684\u7167\u7247\uff0c\u6574\u500b logo \u5ffd\u7136\u975c\u8b10\u6587\u85dd\u4e86\u8d77\u4f86\uff01",(0,i.jsx)(s.br,{}),"\n","\u6240\u4ee5\u662f\u600e\u9ebc\u505a\u5230\u7684\u5462\uff1f\u6211\u5011\u4f86\u770b\u770b\u4e0b\u9762\u7684 code\uff1a"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-html",children:'<div class="mask"></div>\n'})}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-css",children:'.mask {\n background: url("https://i.postimg.cc/bJs0ZYPS/DSC-1027.jpg") no-repeat top center;\n background-size: cover;\n -webkit-mask: url("https://codefictionist.com/assets/images/logo-white-5d1024ae24f7dd517ec2750931e42d82.png") no-repeat center center;\n mask: url("https://codefictionist.com/assets/images/logo-white-5d1024ae24f7dd517ec2750931e42d82.png") no-repeat center center;\n -webkit-mask-size: contain;\n mask-size: contain;\n width: 30rem;\n height: 30rem;\n margin: 0 auto;\n}\n'})}),"\n",(0,i.jsxs)(s.p,{children:["\u53ef\u4ee5\u770b\u5230\u6211\u5011\u9019\u88e1\u7528\u4e86\u4e00\u500b\u5f88\u5c11\u898b\u7684 CSS \u5c6c\u6027 ",(0,i.jsx)(s.code,{children:"mask"}),"\uff0c\u9019\u500b\u5c6c\u6027\u662f\u8b93\u6211\u5011\u5728\u7db2\u9801\u4e0a\u505a\u51fa\u5404\u7a2e\u5716\u7247\u906e\u7f69\u6548\u679c\u7684\u95dc\u9375\u3002",(0,i.jsx)(s.br,{}),"\n","\u89e3\u6790\u4e00\u4e0b\u4e0a\u9762\u7684 code\uff1a"]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsx)(s.li,{children:"\u4e00\u958b\u59cb\u662f\u628a\u5143\u7d20\u7684\u80cc\u666f\u8a2d\u70ba\u7409\u7483\u5149\u82d1\u7684\u7167\u7247\u3002"}),"\n",(0,i.jsxs)(s.li,{children:["\u518d\u4f86\u900f\u904e ",(0,i.jsx)(s.code,{children:"-webkit-mask"})," \u548c ",(0,i.jsx)(s.code,{children:"mask"})," \u9019\u5169\u500b\u5c6c\u6027\uff0c\u628a logo \u5716\u7247\u8a2d\u70ba\u906e\u7f69\u3002"]}),"\n",(0,i.jsxs)(s.li,{children:["\u6700\u5f8c\u518d\u8a2d\u5b9a ",(0,i.jsx)(s.code,{children:"mask-size"})," \u4f86\u8abf\u6574\u906e\u7f69\u7684\u5927\u5c0f\u3002"]}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["\u81f3\u65bc\u70ba\u4f55\u8981\u591a\u8a2d\u5b9a\u5e36 ",(0,i.jsx)(s.code,{children:"-webkit-"})," \u524d\u7db4\u7684\u5c6c\u6027\u5462\uff1f\u9019\u662f\u70ba\u4e86\u78ba\u4fdd\u700f\u89bd\u5668\u7684\u76f8\u5bb9\u6027\uff0c\u6211\u5011\u9700\u8981\u591a\u8a2d\u5b9a\u4e00\u500b\u5e36 ",(0,i.jsx)(s.code,{children:"-webkit-"})," \u524d\u7db4\u7684\u5c6c\u6027\u3002"]}),"\n",(0,i.jsx)(s.h2,{id:"\u53c3\u8003\u8cc7\u6599",children:"\u53c3\u8003\u8cc7\u6599"}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://timchen0607.medium.com/css-masks-%E5%9C%96%E7%89%87%E9%81%A
1E%E7%BD%A9%E6%95%88%E6%9E%9C-a6b6493a25bb",children:"CSS Masks \u5716\u7247\u906e\u7f69\u6548\u679c"})}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},60573:(e,s,n)=>{n.d(s,{A:()=>t});const t=n.p+"assets/images/day10_mask-f1f60366a36ac1e1a5d6a195994047a1.jpg"},36671:(e,s,n)=>{n.d(s,{A:()=>t});const t=n.p+"assets/images/logo-white-5d1024ae24f7dd517ec2750931e42d82.png"},28453:(e,s,n)=>{n.d(s,{R:()=>c,x:()=>r});var t=n(96540);const i={},o=t.createContext(i);function c(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.