閫沄绔欑殑鏃跺€欑湅鍒颁竴涓嚜鎺║I缁勪欢搴撶殑甯栧瓙銆傛垜瑙夊緱寰堝ソ銆傚皝闈㈠彲浠ヤ负鏁翠釜椤甸潰娣诲姞纾ㄧ爞鐜荤拑鏁堟灉锛佹垜寰堟儕璁躲€傞┈涓婃煡鐪婩12鐨勫疄鐜版柟娉曪紝鍥犱负鍦ㄦ垜鐨勫浘閲岋紝娌℃湁绠€鍗曠殑鏂规硶鍙互鐩存帴瀹炵幇鑳屾櫙鍏冪礌鐨勬瘺鐜荤拑鏁堟灉銆傚叾瀹炰笉鍙槸鎶藉眽缁勪欢锛屽叾浠栦竴浜涘甫閬僵鐨勭被Modal缁勪欢涔熸湁杩欑姣涚幓鐠冩晥鏋滐紝澶у鍙互鐪嬬湅銆傚ソ浜嗭紝搴熻瘽涓嶅璇达紝寮€濮嬫棰樸€侰odePenDemoCodePen涓婄殑鍘烡emo姣旇緝涔憋紝鏈夊緢澶氫笉鐩稿叧鐨勬牱寮忓唴瀹癸紝鎴戠畝鍖栦簡涓€涓嬨€傛棭骞寸殑鍘熷纾ㄧ爞鐜荤拑鏁堟灉灏卞儚涓婇潰鐨凞emo銆傞鍏堬紝鍦ㄥ閮ㄥ鍣ㄤ腑娣诲姞鑳屾櫙鍥剧墖锛屽苟鍦ㄥ綋鍓嶁€滅獥鍙ｂ€濅笂璁剧疆鐩稿悓鐨勮儗鏅浘鐗囷紝鐒跺悗浣跨敤filter:blur()灞炴€у閬僵灞傜殑鑳屾櫙杩涜妯＄硦澶勭悊銆備絾鏄繖鏍蜂細鏈変竴涓棶棰橈紝灏辨槸filter灞炴€ilter:blur()闇€瑕佽缃湪鍗曠嫭鐨勮儗鏅厓绱犳垨鑰呬吉绫讳笂锛屽惁鍒欑獥鍙ｉ噷闈㈢殑鍐呭浼氭ā绯娿€傝€屼笖浼氬彈鍒伴檺鍒讹紝杩欎釜鎴戜滑鍚庨潰浼氳鍒般€傝€屾槸浣跨敤浜嗘柊鐨勬护闀滃睘鎬ackground-filter:blur()涔嬪悗锛屽氨寰堢畝鍗曚簡銆傛偍鍙互鐪嬪埌浠ヤ笅婕旂ず锛欳odePenDemo2銆傚彲浠ョ湅鍒版瘮鍘熸潵鐨勬瘺鐜荤拑瀹炵幇灏戜簡涓€涓吉绫诲厓绱狅紝浠栦細鐩存帴鍦ㄨ瑕嗙洊鐨勯儴鍒嗗姞涓婃护闀滄晥鏋滐紝涓嶈€冭檻琚鐩栫殑鍐呭锛屼笉浼氬奖鍝嶅埌鍐呴儴鍏冪礌銆備篃灏辨槸璇达紝鍙互鈥滀笉鍙楅檺鍒垛€濆湴瀹炵幇姣涚幓鐠冩晥鏋溿€傛瘮濡傛枃绔犲紑澶存彁鍒扮殑锛岀粰鏁翠釜椤甸潰鍏冪礌鍔犱笂閬僵銆傚湪杩囧幓锛岃繖鍙兘閫氳繃浣跨敤鐢诲竷浣滀负褰撳墠椤甸潰鐨勫揩鐓ф潵瀹炵幇銆傛棭鍓嶆槑鏄剧殑鎶曞叆鍜屽洖鎶ヤ笉鎴愭瘮渚嬶紝鐜板湪鐢╢ilter:blur()灏卞彲浠ヨ交鏉惧疄鐜帮紝鑰屼笖鍙互鎶曚骇鐨勬瘮渚嬫瀬楂橈紒馃槏杩欎箞妫掔殑CSS灞炴€ф槸浠€涔堟椂鍊欐彁鍑烘潵鐨勶紵浠庡紶鏂版棴鑰佸笀鐨勩€奀SS鏂颁笘鐣屻€嬮偅閲屼簡瑙ｅ埌锛氬墠绔湀鍏充簬姣涚幓鐠冩晥鏋滃舰鎴愮殑璁ㄨ鏄湪iOS7鍑烘潵鐨勬椂鍊欍€備笌楂樻柉妯＄硦涓嶅悓锛屾瘺鐜荤拑鐨勬晥鏋滀笉鏄ā绯婂綋鍓嶅厓绱狅紝鑰屾槸妯＄硦褰撳墠鍏冪礌鍚庨潰鐨勫尯鍩熴€傚唴瀹规ā绯?..iOS7鍑烘潵涓ゅ勾鍚庯紝iOS9鏀寔浜嗕竴涓彨鍋歜ackdrop-filter鐨凜SS灞炴€э紝鍙互寰堟柟渚跨殑瀹炵幇姣涚幓鐠冩晥鏋?..鍙互鐪嬪埌锛屽洜涓烘彁鍑虹殑鐗规€pple锛屾墍浠ュ湪Safari涓婄殑瀹炵幇浼氬緢鏃╋紙iOS9琛ㄧず2015骞村氨鏀寔浜嗮煒憋級锛岀劧鍚庡叾浠栨祻瑙堝櫒澶ф2019骞村乏鍙充細鏀寔杩欎釜灞炴€с€傚叧浜庣敤娉曪紝铏界劧杩樺湪鑽夋闃舵锛屽悇绉嶇幇浠ｆ祻瑙堝櫒宸茬粡涓嶅悓绋嬪害鏀寔璇ュ睘鎬э紙2022骞?鏈?6鏃ワ級锛欳hrome76+銆丒dge17+鍜孫pera63+瀹岀編鏀寔锛團ullsupport锛夛紝Safari9+鍜宨OSSafari9+闇€瑕佷娇鐢?webkit-瀛楅;Firefox70+鐗瑰埆闇€瑕佹墦寮€layout.css.backdrop-filter.enabled鍜実fx.webrender.all棣栭€夐」锛涗竴鑸笉浼氭湁闂鐨勶紝璇锋斁蹇冦€備絾鏄渶濂界殑瀹炵幇鏂瑰紡鏄厛缁欏厓绱犺缃竴涓崐閫忔槑鐨勮儗鏅壊锛岀劧鍚庡姞涓奲ackdrop-filter灞炴€э紝杩欐牱鍗充娇鐢ㄦ埛鐨勬祻瑙堝櫒澶棫涓嶆敮鎸佽繖涓睘鎬ф垨鑰呬娇鐢‵irefox锛屼篃鑳界湅鍒板崐閫忔槑鐨勮儗鏅鑹层€傞€忔槑鑳屾櫙鑴遍鑰屽嚭銆傝鎯呬篃鍙互鏌ョ湅MDN涓婂叧浜庤灞炴€у鍚勪釜娴忚鍣ㄥ吋瀹规€х殑鎻忚堪銆傞偅涔堜负浠€涔堝彧鏈塅irefox鏈変竴浜涢棶棰橈紝搴旇鏄棭鏈熺増鏈殑WebRender瀵艰嚧鐨刡ug锛屾墍浠ラ粯璁ゆ病鏈夊紑鍚€傜湅鍒板笘瀛愰噷杩樺湪璁ㄨ锛屾墍浠ョ煭鏈熺湅鏄病甯屾湜浜嗭紙浼樺厛绾т篃浠嶱1闄嶅埌浜哖3锛夈€傚ぇ瀹跺彲浠ョ湅鐪嬭繖涓狟UG鍙嶉璐翠簡瑙ｄ竴涓嬨€傛枃鏈帹鑽愪竴涓嬮偅涓鐢熻倽鐨刄I缁勪欢搴撱€傛垜瑙夊緱鎸哄ソ鐨勩€傛瘡涓汉閮藉彲浠ュ幓璁㈣喘涓€棰楁槦鏄熷苟鎷ㄦ墦鐢佃瘽銆傪煈夊鏋滀笉鏄疞ewDesign鐨勭粍浠跺簱锛屾垜鍒扮幇鍦ㄩ兘涓嶇煡閬撹繕鏈夎繖涔堢畝鍗曟槗鐢ㄧ殑CSS灞炴€у彲浠ュ疄鐜版瘺鐜荤拑鏁堟灉銆傛渶鍚庯紝寮犺€佸笀鍦ㄤ粬鐨勬柊涔︿腑鎻愬埌锛氶檺鍒跺ぇ瑙勬ā浣跨敤backdrop-filter灞炴€х殑鍞竴鍥犵礌鏄€ц兘銆傚鏋滀綘鐨勯〉闈㈤潪甯稿鏉傦紝鍔ㄧ敾寰堝锛屼氦浜掗绻侊紝backdrop-filter灞炴€у彲鑳戒細閫犳垚鍗￠】锛岄渶瑕侀€傚綋浣跨敤銆傪煋氱浉鍏宠祫婧愯繃婊ゅ櫒-CSS|MDN鑳屾櫙杩囨护鍣?CSS|MDNFilter鏁堟灉妯″潡2绾W3CEditor'sDraftCSSbackdrop-filter浠嬬粛鍜孉ppleiOS姣涚幓鐠冩晥鏋溌紶閼棴-閼┖闂?閼敓娲婚粯璁ゅ惎鐢–SSbackdrop-filter灞炴€э紙璁╁畠鎼伀杞﹀彂甯冿級鏈枃鍙備笌SegmentFault鎬濈淮鍐欎綔鎸戞垬璧涳紝娆㈣繋姝ｅ湪闃呰鐨勪綘鍔犲叆銆?/p>
