CSS穿墙！太强了
时间：2023-04-05 13:06:29
HTML5
澶у濂斤紝鎴戞槸闆朵竴锛屼粖澶╃粰澶у鍒嗕韩涓€涓狢SS涓濂囩殑灞炴€э細filter锛屼负浠€涔堣繖涔堢濂囧憿锛熸濡傛垜鐨勬爣棰樻墍璇达紝鎴戠獊鐒跺彂鐜板畠鍙互甯姪鎴戜滑杞绘澗瀹炵幇绌垮鐗规晥銆傜被浼间簬杩欑馃憞鐪嬭捣鏉ュ氨鍍忔垜浠湪绉戝够鐢靛奖涓湅鍒扮殑绌胯繃涓€涓闂ㄦ椂鐨勬晥鏋溿€傝繖涓湡鐨勫緢閰凤紒涓嶈繃杩欎釜鏁堟灉瀵逛簬寮€鍙戣€呮潵璇村苟涓嶉毦锛屽洜涓哄彧璁剧疆浜嗕袱涓睘鎬с€侰SS涓秴绾х墰閫肩殑filter灞炴€у氨鏄粠杩欎釜渚嬪瓙琛嶇敓鍑烘潵鐨勶紝杩樻湁鍝簺鐗涢€肩殑灞炴€у憿锛熺湅涓€鐪嬶紒杩囨护鍣ㄦ敮鎸佺殑灞炴€ф槸浠嶮DN涓婄殑绀轰緥鍊熺敤鐨勩€傝杩囨护鍣ㄦ敮鎸佷互涓嬪睘鎬э細filter:blur(5px);杩囨护鍣細浜害锛?.4锛夛紱杩囨护鍣細瀵规瘮搴︼紙200%锛夛紱婊ら暅锛氶槾褰憋紙16px16px20px钃濊壊锛夛紱婊ら暅锛氱伆搴︼紙50%锛夛紱婊ら暅锛氳壊璋冩棆杞紙90deg锛夛紱婊ら暅锛氬弽杞紙75%锛夛紱婊ら暅锛氫笉閫忔槑搴︼紙25%锛夛紱婊ら暅锛氶ケ鍜岋紙30%);杩囨护鍣?妫曡鑹?60%);杩欎簺灞炴€у彲浠ュ崟鐙娇鐢紝涔熷彲浠ョ粍鍚堜娇鐢紝渚嬪锛歠ilter:contrast(175%)brightness(3%)锛沺s锛氬睘鎬ф惌閰嶄娇鐢ㄥ彲鑳戒細鏈夊鏁堬紒妗堜緥鏈枃灏嗕粙缁嶄竴浜涚濂囩殑妗堜緥銆傚ぇ姒傜巼鎴戜笉浼氭妸姣忎釜灞炴€х殑鍘熺悊瑙ｉ噴娓呮锛屽洜涓烘垜涓嶆槸寰堟竻妤氥€俠lurblur灞炴€х敤鐨勮繕鏄瘮杈冨鐨勶紝涓昏鏄珮鏂ā绯婏紝杩欏嚑骞村緢娴佽銆傛瘺鐜荤拑鏁堟灉鍙互杩欐牱瀹炵幇锛?style>.blur{width:400px;楂樺害锛?00px锛涜竟鐣屽崐寰勶細10px锛涜儗鏅細rgba锛?55銆?55銆?55銆?.5锛夛紱浣嶇疆锛氱浉瀵癸紱}.blur::before{鍐呭:"";浣嶇疆锛氱粷瀵癸紱鎻掑浘锛?000锛涜儗鏅細缁ф壙锛涜繃婊ゅ櫒锛氭ā绯婏紙10px锛夛紱鏁堟灉濡備笅锛氬叾瀹炶繖绉嶆瘺鐜荤拑鐨勬晥鏋滀笉鏄緢濂斤紝鍙兘杈句笉鍒癠I鐨勮姹傘€傚鏋滄兂瑕佸ソ鐨勬瘺鐜荤拑鏁堟灉锛屽彲浠ヤ娇鐢╞ackdrop-filter鏉ュ疄鐜帮紝浣嗘槸鍚庤€呬笌鍓嶈€呬笉鍏煎Goodbrightness浜害灞炴€х敤浜庝慨鏀逛寒搴︺€傝鍊煎彲浠ユ槸鐧惧垎姣旀垨鍊?0.5=50%)銆傞粯璁ゅ€间负1锛屼絾涓嶈兘涓鸿礋鏁般€傚綋璇ュ€艰秺鎺ヨ繎0鏃讹紝鍥剧墖瓒婃殫銆傚綋瀹冪瓑浜?鏃讹紝鏁翠釜鐢婚潰鍑犱箮鍙樻垚绾粦鑹诧紱璇ュ€肩悊璁轰笂鍙互鏃犻檺澶э紝褰撹揪鍒颁竴瀹氬€兼椂锛岀敾闈㈠嚑涔庡彉鎴愮函鐧借壊銆備綘鍦ㄨ繖閲屽仛浠€涔堬紵鏈変竴涓緢甯歌鐨勬晥鏋滃ぇ瀹朵竴瀹氶兘瑙佽繃锛氬綋浣犵湅鍒拌繖涓晥鏋滅殑鏃跺€欙紝鏈夋病鏈夋兂杩囨€庝箞瀹炵幇鍛紵鍝堝搱锛屽叾瀹炰竴涓睘鎬у氨澶熶簡锛?style>.brightness{瀹藉害锛?00px;楂樺害锛?00px锛涜竟鐣屽崐寰勶細8px锛涙父鏍囷細鎸囬拡锛涜儗鏅細#333锛沠ont-size:45px;}.brightness:hover.icon{filter:brightness(1.3);}
contrastcontrast鍙互鐢ㄦ潵璋冩暣鍥剧墖鐨勫姣斿害锛岃繖涓瘝鏈夌偣涓撲笟锛岃璁″笀鐢ㄩ€氫織鏄撴噦鐨勮瘽璇达紝瀵规瘮搴?鍥惧儚涓渶鐧界殑鑹插€?鏈€鏆楃殑鑹插€笺€傛牴鎹繖涓叕寮忥紝鍙互鐞嗚В涓猴細瀵规瘮搴﹁秺澶э紝鐧借壊瓒婂己锛堜寒锛夛紝榛戣壊瓒婂急锛堟殫锛夛紝鍥惧儚瓒婄櫧锛涘姣斿害瓒婂皬锛岀櫧鑹诧紙鏆楋級瓒婂急锛岄粦鑹诧紙鐧借壊锛夎秺寮猴紝鍥惧儚瓒婃殫锛沜ontrast()鐨勫€煎彲浠ュ啓鎴愮櫨鍒嗘瘮锛屼篃鍙互鍐欐垚鏁板€硷紙0.5=50%锛夛紝榛樿鍊间负1锛屽彲浠ユ棤闄愬ぇ锛岃繖鏍风敾闈細鏇翠寒锛屼絾涓嶈兘涓鸿礋鏁?绠€鍗曠悊瑙ｄ竴涓嬫蹇碉紝鎴戜滑鏉ョ湅鐪嬪疄璺典腑鐨勬晥鏋滐細鍙互鐪嬪埌褰撹鍊煎ぇ浜?灏忎簬1鏃讹紝鍥剧墖琚獹raymask瑕嗙洊锛涘綋璇ュ€煎ぇ浜?鏃讹紝鍥剧墖涓緢澶氫寒鍏冪礌鏇翠寒锛屽緢澶氭殫鍏冪礌鏇存殫銆傝繖涓睘鎬уソ鍍忔病浠€涔堢敤锛屾棦涓嶈兘浣垮浘鍍忔洿閫肩湡锛屼篃涓嶈兘浣垮浘鍍忔洿缁嗚吇锛屽鍚э紵鎴戞兂鏄繖鏍凤紒浣嗘槸浣犺鐭ラ亾瀵规瘮搴﹀拰浜害杩欎袱涓睘鎬у拰UI璁捐鏈夌潃寰堝己鐨勭浉鍏虫€с€傝繖璁╂垜鎯宠捣浜哖S涓殑鍥惧儚璋冩暣銆傚垏鎹㈠埌鑻辨枃鐗堢殑PS缁欏ぇ瀹剁湅锛氭濂藉搴擯S涓殑鍥剧墖璋冩暣銆傛垜浠兘鐭ラ亾杩欎袱涓缃睘鎬у€笺€傝鍒板墠绔€ц兘浼樺寲锛屾渶澶ц兘鎰熺煡鍒扮殑浼樺寲鍏跺疄灏辨槸鍥惧儚銆傚叾浠栦紭鍖栫偣鐨凴OI鍑犱箮娌℃湁鍥惧儚浼樺寲楂樸€傛槸鍚﹀彲鑳斤細浣跨敤PS闄嶄綆鍥惧儚鐨勪寒搴﹀拰瀵规瘮搴︽潵闄嶄綆鍥惧儚鐨勮川閲忥紝鐒跺悗鐢ㄥ姣斿害鍜屼寒搴︽潵澧炲姞鍥惧儚鐨勪寒搴﹀拰瀵规瘮搴︽潵鎭㈠鍥惧儚鍘熸潵鐨勬晥鏋滐紵鎴戜滑鍏堢湅鐪嬮檷浣庣敾闈㈢殑浜害鍜屽姣斿害浼氫笉浼氶檷浣庣敾璐ㄤ负姝わ紝鎴戠壒鍦版壘浜嗕竴寮犻珮杈?M:鐨勯珮娓呭浘鐗囷紝鐒跺悗鐢≒S閫傚綋闄嶄綆鍏朵寒搴﹀拰瀵规瘮搴︺€備竴瀹氳閫夋嫨鈥渙ldversion鈥濓紝鍥犱负鍙湁杩欑妯″紡涓嬬殑浜害鍜屽姣斿害浼樺寲瑙勫垯鍜屾垜浠殑CSS绫讳技銆傜湅涓€涓嬩慨鏀瑰悗鐨勫浘鐗囧ぇ灏忥紝鍙互鐪嬪埌闅忎究璋冩暣浜嗕竴浜涘睘鎬с€傚浘鐗囧ぇ灏忕缉灏忎簡1M宸﹀彸銆傝兘涓嶈兘鎭㈠鍒板師鏉ョ殑鐢婚潰鏁堟灉鍜岀敾璐紵鍦ㄦ帶鍒跺彴寰皟灞炴€э細filter:brightness(1.2)contrast(1.7);缁撴灉濡備笅锛氬彲浠ョ湅鍑哄嚑涔庢病鏈変粈涔堝尯鍒紝鑲夌溂鐪嬪埌鐨勫浘鍍忔崯澶辨垜瑙夊緱涔熷湪鍙互鎺ュ彈鐨勮寖鍥村唴锛屼絾鏄垜瑙夊緱姣斿師鍥炬洿褰㈣薄涓€浜涳紝涔熻杩欏氨鏄姣旂殑榄斿姏鍚э紒杩欏彧鏄◢寰檷浣庡姣斿害鐨勬晥鏋滐紝鍥惧儚灏哄缂╁皬浜嗙害25%銆傚厛涓嶈璁哄浘鐗囧昂瀵歌兘浼樺寲澶氬皯锛岃嚦灏?5%鐨勪紭鍖栫┖闂村氨寰堜笉閿欎簡銆傚彟澶栵紝涓婇潰鎻愬埌鐨勪竴浜涙护闀滃睘鎬х殑缁勫悎浼氭湁濂囨晥锛屽寘鎷琧ontrast锛屽彲浠ュ拰blur涓€璧蜂娇鐢紝杈惧埌鏈枃寮€澶存彁鍒扮殑绌垮鏁堟灉
