CSS 小技巧 - 一行代码实现头像与国旗的融合

div{浣嶇疆锛氱浉瀵癸紱淇濊瘉閲戯細鑷姩锛涘搴︼細200px锛涢珮搴︼細200px锛?/鏅€氬ご鍍忚儗鏅細url(image1)no-repeat;鑳屾櫙澶у皬锛氳鐩栵紱}.div::{鍐呭锛氣€溾€濅箣鍚庯紱浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涘簳閮細0锛涘彸锛?锛?/鏍囪鍥剧墖鑳屾櫙锛歶rl(image2)no-repeat;鑳屾櫙灏哄锛氬皝闈紱mask:linear-gradient(110deg,#00010%,transparent70%,transparent);}涓婇潰浠ｇ爜涓紝鎴戜滑浣跨敤div鍙婂叾浼厓绱燿iv::after灏嗗ご鍍忓拰鍥芥棗鍙犲姞鍦ㄤ竴璧枫€傛垜浠彧闇€瑕佸湪div::after涓缃竴灞俶askmaskmask:linear-gradient(110deg,#00010%,transparent70%,transparent)锛屽氨鍙互瀹炵幇澶村儚鍜屽浗鏃楃殑宸у鍙犲姞锛歁ask绠€浠嬪湪CSS涓紝mask灞炴€у厑璁哥敤鎴烽€氳繃灞忚斀鎴栬鍓浘鍍忕殑鐗瑰畾鍖哄煙鏉ラ殣钘忓厓绱犵殑閮ㄥ垎鎴栧叏閮ㄥ彲瑙佸尯鍩熴€備娇鐢ㄩ伄缃╂渶鍩烘湰鐨勬柟娉曟槸浣跨敤鍥惧儚锛屽儚杩欐牱锛歿/*Imagevalues*/mask:url(mask.png);/*浣跨敤浣嶅浘浣滀负閬僵*/mask:url(masks.svg#star);/*浣跨敤SVG鍥惧舰涓殑褰㈢姸鍋氳挋鐗?/}褰撶劧锛屼娇鐢ㄥ浘鐗囩殑鏂规硶鍏跺疄姣旇緝楹荤儲锛屽洜涓烘垜浠鍏堝噯澶囧ソ鐩稿簲鐨勫浘鐗囩礌鏉愩€傞櫎浜嗗浘鐗囷紝mask杩樺彲浠ユ帴鍙椾竴涓被浼间簬background鐨勫弬鏁帮紝灏辨槸娓愬彉銆傜被浼间笅闈㈢殑浣跨敤鏂规硶锛歿mask:linear-gradient(#000,transparent)/*浣跨敤娓愬彉鍋氳挋鐗?/}涓嬪浘鍙犲姞浜嗕粠閫忔槑鍒伴粦鑹茬殑娓愬彉锛寋background:url(鍥剧墖.png锛夛紱mask:linear-gradient(90deg,transparent,#fff);}搴旂敤mask鍚庝細鍙樻垚杩欐牱锛氬湪杩欎釜DEMO涓紝鍙互绠€鍗曚簡瑙ask鐨勫熀鏈敤娉曘€傝繖閲岃涓嬩娇鐢╩ask鏈€閲嶈鐨勭粨璁猴細鍥惧儚鐨勯噸鍙犻儴鍒嗗拰mask鐢熸垚鐨勬笎鍙橀€忔槑浼氬彉鎴愰€忔槑鐨勩€傚€煎緱娉ㄦ剰鐨勬槸锛屼笂闈㈢殑娓愬彉浣跨敤鐨勬槸linear-gradient(90deg,transparent,#fff)锛岃繖閲岀殑#fff绾壊閮ㄥ垎鍏跺疄鍙互鎹㈡垚浠讳綍棰滆壊閮戒笉褰卞搷鏁堟灉銆侰odePenDemo--MASK鐨勫熀鏈娇鐢ㄤ娇鐢∕ask鐨勫叾浠栦竴浜涙妧宸у綋鐒讹紝鎺屾彙浜哅ask涔嬪悗锛屽氨鍙互鐜╁嚭寰堝鑺辨牱浜嗐€備緥濡傦紝鎴戜滑鍙互浣跨敤CSS@property涓轰笂闈㈢殑鍥芥棗澶村儚瀹炵幇涓€浜涙湁瓒ｇ殑鎮仠鏁堟灉锛氭垨鑰呬娇鐢ㄨ挋鐗堝疄鐜颁竴浜涙湁瓒ｇ殑杩囨浮鏁堟灉锛氱敋鑷筹紝寮瑰箷缃戠珯鐨勪汉鐗╅伄鎸″脊骞曢兘鏄€氳繃浣跨敤cssmask锛氬鏋滄兂娣卞叆浜嗚Вcssmask锛屼笉濡ㄤ粩缁嗛槄璇昏繖涓ょ瘒鏂囩珷锛氱簿褰╃殑cssmask浣跨敤mask瀹炵幇瑙嗛寮瑰箷瀛楃灞忚斀杩囨护鏈€鍚庯紝鏈枃鍒版缁撴潫锛屽笇鏈涘畠瀵逛綘鏈夊府鍔?)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈馃槃鏇村绮惧僵CSS鐗规晥锛屽彲浠ュ叧娉ㄦ垜鐨凜SS鐏垫劅銆傛洿澶氱簿褰〤SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂颁腑锛屾杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>