.bg{鑳屾櫙锛歶rl(image.png);&>div{瀹藉害锛?00px;楂樺害锛?00px锛涜儗鏅細rgba锛?55銆?55銆?55銆?7锛夛紱}.g-filter{婊ら暅锛氭ā绯婏紙6px锛夛紱}.g-backdrop-filter{鑳屾櫙婊ら暅锛氭ā绯婏紙6px锛夛紱}}CodePenDemo--filtervs.backdrop-filter鍦╞ackdrop-filter涔嬪墠锛屼粎瀵瑰厓绱犺儗鏅疄鐜颁笂杩版护闀滄晥鏋滄槸闈炲父鍥伴毦鐨勶紝瀵逛簬闈欐€佸浘鐗囨潵璇磋繕鏄笉閿欑殑銆傚鏋滆儗鏅繕鏄彲浠ユ粴鍔ㄧ殑鍔ㄦ€佽儗鏅紝閫氬父CSS鏄棤鑳戒负鍔涚殑銆俠ackdrop-filter鐨勮癁鐢熸槸涓轰簡鍦ㄤ笉褰卞搷鍏冪礌鏈韩鐨勬儏鍐典笅锛屽鍏冪礌鍚庨潰鐨勫唴瀹规坊鍔犺繃婊ゅ櫒銆傜敤瀹冩潵瀹炵幇纾ㄧ爞鐜荤拑鏁堟灉锛堟瘺鐜荤拑锛夐潪甯告柟渚匡紒backdrop-filter鐨勫吋瀹规€ackdrop-filter鍏跺疄鏃╁氨璇炵敓浜嗭紝浣嗘槸firefox杩樻槸涓嶅吋瀹癸紒瀵逛簬涓€浜涘凡缁忔斁寮僆E鐨凱C绔笟鍔℃潵璇达紝firefox杩樻槸闇€瑕佸吋瀹圭殑銆傚鏋滆浣跨敤backdrop-filter瀹炵幇姣涚幓鐠冩晥鏋滃簲鐢紝蹇呴』瑙ｅ喅firefox鐨勫吋瀹归棶棰樸€傚湪firefox涓疄鐜版瘺鐜荤拑鏁堟灉灏監K浜嗐€傛湰鏂囩殑閲嶇偣鏄浣曞湪涓嶄娇鐢╞ackdrop-filter鐨勬儏鍐典笅锛屽湪firefox涓敖鍙兘鐨勮繕鍘熸瘺鐜荤拑鏁堟灉銆傞鍏堬紝濡傛灉浣犳甯镐娇鐢╞ackdrop-filter锛屾垨鑰呬笂闈緥瀛愮殑鏁堟灉濡備笅锛屾病鏈夋瘺鐜荤拑鏁堟灉锛氫娇鐢╞ackground-attachment:fixed鍏煎闈欐€佽儗鏅浘鐗囧鏋滀綘鎯充娇鐢ㄦ瘺鐜荤拑瀵圭伀鐙愮殑褰卞搷銆傚簲鐢ㄧ（鐮傜幓鐠冨厓绱犵殑鑳屾櫙鍙槸涓€涓潤鎬佺殑鑳屾櫙鍥剧墖锛屼絾鏄湁寰堝鏂规硶鍙互鍋氬埌銆傛垜浠彧闇€瑕佸湪鍏冪礌鍚庨潰鍙犲姞鐩稿悓鐨勫浘鐗囷紝浣跨敤background-attachment:fixed灏嗗彔鍔犲湪鍏冪礌涓嬫柟鐨勫浘鐗囧畾浣嶅埌涓庤儗鏅浉鍚岀殑鍧愭爣澶勶紝鐒跺悗浣跨敤filter:blur()瀵瑰叾杩涜妯＄硦澶勭悊鍗冲彲銆備吉浠ｇ爜濡備笅锛氳韩浣搟楂樺害锛?00vh;鏄剧ず锛氬脊鎬э紱鑳屾櫙鍥剧墖锛歶rl($img)锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱鑳屾櫙闄勪欢锛氬凡淇锛涜儗鏅ぇ灏忥細灏侀潰锛泒.g-glossy{浣嶇疆锛氱浉瀵癸紱600鍍忕礌锛涢珮搴︼細300px锛涜儗鏅鑹诧細rgba(255,255,255,0.5);婧㈠嚭锛氶殣钘忥紱z-鎸囨暟锛?0锛?::涔嬪墠{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涘彸锛?锛涘簳閮細0锛涜儗鏅浘鐗囷細url($img)锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱鑳屾櫙闄勪欢锛氬凡淇锛涜儗鏅昂瀵革細灏侀潰锛涜繃婊ゅ櫒锛氭ā绯婏紙10px锛夛紱鎸囨暟锛?1锛泒}鏁堟灉濡備笅锛氳繖绉嶆柟娉曚篃鏄湪娌℃湁backdrop-filter涔嬪墠鍦ㄥ悇绉嶆祻瑙堝櫒涓疄鐜扮畝鍗曟瘺鐜荤拑鏁堟灉鏈€甯哥敤鐨勬柟娉曚箣涓€銆侰odePen婕旂ず鈥斺€斾娇鐢ㄥ悗鍙伴檮浠讹細宸蹭慨澶峾filter:bulr()瀹炵幇姣涚幓鐠冩晥鏋滀娇鐢╞ackground-attachment:fixed鏉ュ吋瀹归潤鎬佽儗鏅浘鐨勭己鐐逛絾鏄繖绉嶆柟娉曚篃鏈変袱涓己鐐癸細鐢变簬浣跨敤浼厓绱犲彔鍔犱簡涓€灞傝儗鏅紝鍥犱负灞傜骇鍏崇郴锛岀埗鍏冪礌鐨勮儗鏅湪搴曢儴锛屾墍浠ュ厓绱犳湰韬殑鑳屾櫙鑹叉病鏈夊畬鍏ㄤ綋鐜板嚭鏉ャ€傚彲浠ュ姣斾笅闈袱绉嶆柟娉曠殑瀹為檯鏁堟灉鍥撅細瑙ｅ喅鏂规硶鏄€氳繃鍙﹀涓€涓吉鍏冪礌鍙犲姞涓€灞傝儗鏅壊锛岃繖涓儗鏅壊鏈潵搴旇鏄祴缁欑埗鍏冪礌鏈韩鐨勩€傚彔鍔犲悗鏁堟灉濡備笅锛欳odePenDemo--usebackground-attachment:fixed|filter:bulr()瀹炵幇姣涚幓鐠冩晥鏋滀紭鍖栦笂闈㈢殑鏁堟灉寰堟帴杩戙€傜櫧杈圭憰鐤靛叾瀹炴槸婊ら暅鏈韩鐨勯棶棰橈紝寰堝鏄撹В鍐炽€傛垜浠彧闇€瑕佺◢寰墿澶т吉鍏冪礌鐨勮寖鍥达細.g-glossy{overflow:hidden;....&::before{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱椤堕儴锛?100px锛涘乏锛?100px锛涘彸锛?100px锛涘簳閮細-100px锛泒}瀹氫綅浠ｇ爜鏀硅嚜top:0px;灏辨槸杩欐牱銆傝繖鏍峰熀鏈笂鍙互杈惧埌100%鐨勪豢鐪熴€備娇鐢╩oz-element()鍜宖ilter:blur()鏉ュ疄鐜板鏉傜殑鑳屾櫙姣涚幓鐠冩晥鏋溿€備笅闈㈣繖涓柟娉曞緢宸у銆備竴鑸潵璇达紝浣跨敤纾ㄧ爞鐜荤拑鏁堟灉鐨勮儗鏅厓绱犲苟涓嶅儚鍥剧墖閭ｄ箞绠€鍗曪紒鍏惰儗鍚庨€氬父鏄暣涓〉闈㈠鏉傜殑缁撴瀯锛屽灞侱OM鐨勫祵濂椼€傞偅涔堥€氳繃鍙犲姞涓€涓畝鍗曠殑鍥剧墖锛屾槸琛屼笉閫氱殑锛屾垜浠緱鎯冲姙娉曟ā鎷熸暣涓狣OM鍏冪礌銆傝€屾伆濂藉湪Firefox涓紝鏈夎繖鏍蜂竴涓睘鎬р€斺€攎oz-element()銆備粈涔堟槸-moz-element()锛烳DN-element)瑙ｉ噴浜咰SS鍑芥暟element()瀹氫箟浜嗕粠浠绘剰HTML鍏冪礌鐢熸垚鐨勫浘鍍?image>鍊笺€俰mage鍊间负live锛岃繖鎰忓懗鐫€濡傛灉鎸囧畾鐨凥TML鍏冪礌鍙戠敓鍙樺寲锛屽垯搴旂敤璇ュ睘鎬х殑鍏冪礌鐨勮儗鏅篃浼氶殢涔嬪彉鍖栥€傚畠瀹為檯涓婃槸涓€涓鑼冭崏妗堬紝浣嗗埌鐩墠涓烘鍙湁Firefox鏀寔瀹?-鎴戝彲浠ヤ娇鐢?-CSSelement():瀹冩湁浠€涔堜綔鐢紵-moz-element()鏄浣曚娇鐢ㄧ殑閭ｄ箞-moz-element()鏄浣曚娇鐢ㄧ殑鍛紵绠€鑰岃█涔嬶紝瀹冨彲浠ュ鍒跺厓绱犲唴閮ㄥ憟鐜扮殑UI锛屽苟涓斿彲浠ュ疄鏃跺悓姝ユ洿鏀广€傚亣璁炬垜浠湁涓€涓儚杩欐牱鐨勭畝鍗曠粨鏋勶紝鍏冪礌鑳屾櫙鍜屽姩鎬佸唴瀹癸細

Content