鑳屾櫙鍩烘湰姒傚康CSS filter聽灞炴€у皢妯＄硦鎴栭鑹插亸绉荤瓑鍥惧舰鏁堟灉搴旂敤浜庡厓绱犲舰鎴愭护闀滐紝婊ら暅閫氬父鐢ㄤ簬璋冩暣鍥惧儚锛岃儗鏅拰杈规鐨勬覆鏌撱€傚畠鐨勫€煎彲浠ヤ负 filter 鍑芥暟 <filter-function> 鎴栦娇鐢?url 娣诲姞鐨剆vg婊ら暅銆俧ilter: <filter-function> [<filter-function>]* | nonefilter: url(file.svg#filter-element-id)聽<filter-function>聽鍙互鐢ㄤ簬 filter聽鍜屄燽ackdrop-filter聽灞炴€с€傚畠鐨勬暟鎹被鍨嬬敱涓嬪垪杩囨护鍣ㄥ嚱鏁颁箣涓€鎸囧畾銆傛瘡涓嚱鏁伴渶瑕佷竴涓弬鏁帮紝濡傛灉鍙傛暟鏃犳晥锛屽垯婊ら暅涓嶄細鐢熸晥銆備互涓嬫槸瀵规护闀滃嚱鏁板惈涔夌殑瑙ｉ噴锛歜lur()锛氭ā绯婂浘鍍廱rightness() 锛氳鍥惧儚鏇存槑浜垨鏇存殫娣ontrast()锛氬鍔犳垨鍑忓皯鍥惧儚鐨勫姣斿害drop-shadow()锛氬湪鍥惧儚鍚庢柟搴旂敤鎶曞奖grayscale()锛氬皢鍥惧儚杞负鐏板害鍥緃ue-rotate()锛氭敼鍙樺浘鍍忕殑鏁翠綋鑹茶皟invert()锛氬弽杞浘鍍忛鑹瞣pacity()锛氭敼鍙樺浘鍍忛€忔槑搴aturate()锛氳秴楗卞拰鎴栧幓楗卞拰杈撳叆鐨勫浘鍍弒epia()锛氬皢鍥惧儚杞负妫曡鑹茬敤娉曠ず渚?* 浣跨敤SVG filter */filter: url("filters.svg#filter-id");/* 浣跨敤filter鍑芥暟 */filter: blur(5px);filter: brightness(0.4);filter: contrast(200%);filter: drop-shadow(16px 16px 20px blue);filter: grayscale(50%);filter: hue-rotate(90deg);filter: invert(75%);filter: opacity(25%);filter: saturate(30%);filter: sepia(60%);/* 澶氫釜filter */filter: contrast(175%) brightness(3%);/* 涓嶄娇鐢╢ilter */filter: none;/* 鍏ㄥ眬鍙橀噺 */filter: inherit;filter: initial;filter: unset;搴旂敤妗堜緥鏇村姞鏅鸿兘鐨勯槾褰辨晥鏋滃湪缁欏厓绱犳坊鍔犻槾褰辩殑鏃跺€欙紝鎴戜滑涓€鑸噰鐢?box-shadow 灞炴€э紝閫氳繃 box-shadow(x鍋忕Щ, y鍋忕Щ, 妯＄硦澶у皬, 闃村奖澶у皬, 鑹插€? inset) 鐨勮娉曞舰寮忓緢瀹规槗涓哄厓绱犳坊鍔犻槾褰辨晥鏋滐紝浣?box-shadow 涔熸湁涓€涓己鐐癸紝灏辨槸鍦ㄧ粰閫忔槑鍥剧墖娣诲姞闃村奖鏁堟灉鏃讹紝鏃犳硶绌块€忓厓绱狅紝鍙兘娣诲姞鍒伴€忔槑鍥剧墖鍏冪礌鐨勭洅妯″瀷涓娿€傝繖涓椂鍊欙紝filter 灞炴€х殑 drop-shadow 鏂规硶灏辫兘寰堝ソ鐨勮В鍐宠繖涓棶棰橈紝鐢ㄥ畠娣诲姞鐨勯槾褰卞彲浠ョ┛閫忓厓绱狅紝鑰屼笉鏄坊鍔犲埌鍏冪礌鐨勭洅妯″瀷杈规涓娿€俤rop-shadow 娣诲姞鐨勯槾褰遍櫎浜嗗彲浠ョ┛閫忛€忔槑鍏冪礌澶栵紝闃村奖鏁堟灉鍜?box-shadow 鏄浉鍚岀殑锛屽鏋滄祻瑙堝櫒鏀寔纭欢鍔犻€熺殑璇濓紝浣跨敤 filter 娣诲姞鐨勯槾褰辨晥鏋滀細鏇村姞閫肩湡銆俤rop-shadow 璇硶濡備笅锛堝畠闄や簡涓嶆敮鎸佽缃?inset锛屽叾浠栧拰 box-shadow 鏄畬鍏ㄧ浉鍚岀殑锛夛細filter: drop-shadow(x鍋忕Щ, y鍋忕Щ, 妯＄硦澶у皬, 鑹插€?;濡傦細filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .5));涓嬪浘鏄垎鍒娇鐢?box-shadow 鍜?filter: drop-shadow 涓洪€忔槑鍏冪礌娣诲姞闃村奖鐨勫姣旓細<img class="box-shadow" src="futurama.png" /><img class="drop-shadow" src="futurama.png" />.box-shadow { box-shadow: 1px 1px 15px rgba(0, 0, 0, .5);}.drop-shadow { filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .5));}鍏冪礌銆佺綉椤电疆鐏板彂鐢熼噸澶х伨瀹充簨鏁呮垨鍏朵粬鍝€鎮兼棩鏃讹紝鍥戒紒鏀垮簻缃戠珯寰€寰€鏈夌綉椤靛叏閮ㄧ疆鐏扮殑闇€姹傘€傛垨鑰呭緢澶氱綉椤典腑鏈夐紶鏍?hover 鎮诞鍒扮伆鑹插厓绱犱笂鏃跺彉鎴愬僵鑹茬殑鏍峰紡鏁堟灉銆傛鏃跺氨鍙互浣跨敤 filter 灞炴€х殑 grayscale 鏂规硶瀹炵幇锛屽畠鍙互璋冩暣鍏冪礌鐏板害锛岄€氳繃缁欓〉闈㈠厓绱犺缃?filter: grayscale(100%) 灏卞彲灏嗛〉闈㈠厓绱犵疆鐏般€備互涓嬬ず渚嬩腑锛宐ody 鏍囩涓嬫湁 h1 鍜?img 鏍囩锛屾湭娣诲姞 filter 鏍峰紡鍓嶅涓嬫墍绀恒€?lt;body> <h1 class="title">FUTURAMA</h1> <img class="img" width="500" src="./images/futurama.png" /></body>鐜板湪鎴戜滑缁?body 鍏冪礌娣诲姞涓€涓?.gray 绫伙紝<body class="gray"> 灏卞彲瀹炵幇鏁翠釜缃戦〉缃伆鏁堟灉銆?gray { filter: grayscale(100%);}涓轰簡鍏煎 IE8 绛夊叾浠栦綆鐗堟湰娴忚鍣紝鎴戜滑鍙互鍔犱笂娴忚鍣ㄥ墠缂€鍜?svg 婊ら暅銆傪煒?gray { -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: grayscale(100%);}鍦ㄥ仛绱ф€ョ疆鐏扮綉椤甸渶姹傛椂锛屼笂绾夸竴娈垫椂闂村線寰€闇€瑕佹挙鎺夎繖涓姛鑳斤紝鎴戜滑杩樺彲浠ュ湪棣栨涓婄嚎鏃舵坊鍔犱互涓嬬被浼肩殑鏂规硶锛屾潵鎺у埗缃伆鏁堟灉鐨勮嚜鍔ㄤ笂涓嬬嚎鏃堕棿锛岃繖鏍峰埌杈鹃瀹氭椂闂村氨鍙嚜鍔ㄦ挙鍘伙紝涓嶇敤璧颁袱娆℃柦宸ユ祦绋嬨€傪煠?function setGray() { var endTime = Date.parse("Apr 06 2077 00:00:01"); var timestamp = Date.parse(new Date()); if (timestamp <= endTime) { document.querySelector('html').classList.add('gray'); }})();鍏冪礌寮鸿皟銆侀珮浜産rightness 鏂规硶瀹炵幇鍏冪礌楂樹寒鐨勬晥鏋滐紝鍙互搴旂敤鍒拌彍鍗曟爮銆佸浘鐗囧垪琛?hover 鏁堟灉锛屾潵寮鸿皟榧犳爣褰撳墠鎮诞鎴栭€変腑鐨勫唴瀹广€備笅闈㈡槸瀵逛竴缁勬寜閽彍鍗曟爮娣诲姞 brightness 鍜?saturate 涓や釜鏂规硶锛岄€氳繃鏀瑰彉浜害鍜岄ケ鍜屽害鏉ラ珮浜厓绱犮€?lt;div class="container"> <a class="button">馃崑</a> <a class="button">馃崕</a> <a class="button">馃崘</a> <a class="button dark">馃</a> <a class="button dark">馃崉</a> <a class="button dark">馃尳</a> <a class="button disabled">馃崚</a> <a class="button disabled">馃崊</a> <a class="button disabled">馃</a></div>.container { margin: 40px;}.button { padding: 0.5em 0.5em; background: #E0E0E0; border-radius: 3px;}.button.dark { background: #333;}.button:hover:not(.disabled) { cursor: pointer; border-radius: 3px; filter: brightness(110%) saturate(140%);}.button.disabled { filter: grayscale(100%);}姣涚幓鐠冩晥鏋滄瘺鐜荤拑锛團rosted glass锛夋晥鏋滐紝椤惧悕鎬濅箟灏辨槸绫讳技鍗婇€忔槑姣涚幓鐠冪殑鏁堟灉锛屽湪 iOS 绯荤粺銆乄indows 10 绛夌郴缁?UI 涓湁骞挎硾搴旂敤锛屼娇鐢ㄦ瘺鐜荤拑鏁堟灉鍙互澧炲己瑙嗚浣撻獙銆傚湪 銆奀SS鎻銆?绛夎憲浣滀腑涔熸湁绯荤粺璁茶В锛屼笅闈㈡槸鎴戝鍒嗗埆浣跨敤 filter: blur 鍜?backdrop-filter: blur涓ょ鏂规硶瀹炵幇杩欑鏁堟灉鐨勬€荤粨銆傛湁涓や釜鍚湁鐩稿悓绫诲悕 glass 鐨?div 鍏冪礌锛屽畠浠垎鍒娣诲姞涓や釜绫?glass-by-filter 鍜?glass-by-backdrop-filter 鏉ュ尯鍒嗕袱绉嶆柟娉曘€?lt;div class="glass glass-by-filter"></div><div class="glass glass-by-backdrop-filter"></div>閫氱敤鏍峰紡锛岃缃瘺鐜荤拑鍏冪礌鐨勫ぇ灏忋€佸渾瑙掔瓑鍩烘湰鏍峰紡锛?glass { height: 300px; width: 300px; border: 1px groove #EFEFEF; border-radius: 12px; background: rgba(242, 242, 242, 0.5); box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);}filter: blur 鏂规硶锛岀粰鍏冪礌娣诲姞浜嗕竴涓?::before 浼被璁剧疆 blur 鏂规硶骞跺皢鍏剁疆浜庡簳灞傚疄鐜版瘺鐜荤拑鏁堟灉銆?glass-by-filter { z-index: 1; box-sizing: border-box; position: relative;}.glass-by-filter::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: inherit; filter: blur(10px);}backdrop-filter: blur 鐩存帴鍦ㄥ厓绱犱笂娣诲姞 blur 鏂规硶瀹炵幇姣涚幓鐠冩晥鏋溿€?glass-by-backdrop-filter { backdrop-filter: blur(10px);}瀹炵幇鏁堟灉濡備笅鍥炬墍绀猴紙宸︼細filter銆佸彸锛歜ackdrop-filter锛夛細闃呰鎵╁睍锛氭瘺鐜荤拑杈规鏁堟灉锛歨ttps://css-tricks.com/blurre...鑹烘湳鐓э紒鐢氳嚦鍙互瀹炵幇绠€鏄撶増 insatagram澶嶅彜銆佺増鐢汇€佹补鐢汇€佹极鐢汇€佹恫鍖栥€佽€佺収鐗囥€佹€у喎娣°€佽帿鍏拌开銆佽禌鍗氭湅鍏嬨€佹椇杈惧够瑙嗛鏍奸€氶€氶兘鍙互瀹炵幇锛侀€氳繃缁撳悎浣跨敤 filter 鐨勬墍鏈夋柟娉曪紝鍙互鎼厤鍑轰换鎰忚嚜宸辨兂瑕佺殑鏁堟灉銆備互涓嬫槸涓€涓畝鍗曠殑 filter 鏂规硶璋冭妭鍣紝鍙互璋冩暣姣忎釜鏂规硶鐨勫€硷紝鍚屾椂瀹炴椂灞曠ず鍥剧墖鐨勬护闀滄晥鏋溿€傚涓嬪浘鎵€绀恒€傞〉闈富瑕佷唬鐮佸涓嬶紝鎺у埗鍖?#imageEditor 鏄竴涓?form 琛ㄥ崟锛岃〃鍗曟瘡涓€琛屽垎鍒帶鍒朵竴绉峟ilter鏂规硶鐨勫€硷紝灞曠ず鍖?#imageContainer 鍐呴儴鍖呭惈涓€涓?img 鍏冪礌锛屼骇鐢熺殑 filter 婊ら暅浣滅敤鍦ㄨ鍏冪礌涓娿€?lt;form id="imageEditor"> <p> <label for="gs">Grayscale</label> <input id="gs" name="gs" type="range" min="0" max="100" value="0"> </p> <p> <label for="blur">Blur</label> <input id="blur" name="blur" type="range" min="0" max="10" value="0"> </p> <p> <label for="br">Exposure</label> <input id="br" name="br" type="range" min="0" max="200" value="100"> </p> <p> <label for="ct">Contrast</label> <input id="ct" name="ct" type="range" min="0" max="200" value="100"> </p> <p> <label for="huer">Hue Rotate</label> <input id="huer" name="huer" type="range" min="0" max="360" value="0"> </p> <p> <label for="opacity">Opacity</label> <input id="opacity" name="opacity" type="range" min="0" max="100" value="100"> </p> <p> <label for="invert">Invert</label> <input id="invert" name="invert" type="range" min="0" max="100" value="0"> </p> <p> <label for="saturate">Saturate</label> <input id="saturate" name="saturate" type="range" min="0" max="500" value="100"> </p> <p> <label for="sepia">Sepia</label> <input id="sepia" name="sepia" type="range" min="0" max="100" value="0"> </p> <input type="reset" form="imageEditor" id="reset" value="Reset" /></form><div id="imageContainer" class="center"> <img src="futurama.png"></div>function editImage() { var gs = $("#gs").val(); // grayscale var blur = $("#blur").val(); // blur var br = $("#br").val(); // brightness var ct = $("#ct").val(); // contrast var huer = $("#huer").val(); // hue-rotate var opacity = $("#opacity").val(); // opacity var invert = $("#invert").val(); // invert var saturate = $("#saturate").val(); // saturate var sepia = $("#sepia").val(); // sepia $("#imageContainer img").css( "filter", 'grayscale(' + gs+ '%) blur(' + blur + 'px) brightness(' + br + '%) contrast(' + ct + '%) hue-rotate(' + huer + 'deg) opacity(' + opacity + '%) invert(' + invert + '%) saturate(' + saturate + '%) sepia(' + sepia + '%)' ); $("#imageContainer img").css( "-webkit-filter", 'grayscale(' + gs+ '%) blur(' + blur + 'px) brightness(' + br + '%) contrast(' + ct + '%) hue-rotate(' + huer + 'deg) opacity(' + opacity + '%) invert(' + invert + '%) saturate(' + saturate + '%) sepia(' + sepia + '%)' );}// 褰搃nput鍊煎彂鐢熷彉鍖栨椂鍗虫椂搴旂敤婊ら暅$("input[type=range]").change(editImage).mousemove(editImage);鐜板湪鍙槸瀹炵幇浜嗘护闀滅殑瀹炴椂棰勮锛屽悗缁緟瀹炵幇鍔熻兘鍖呮嫭鏀寔澶嶆潅鐨?svg 婊ら暅妯＄増銆佸鍑轰笅杞界瓑锛屽畬鎴愯繖浜涙楠わ紝浠ュ悗鐓х墖娣诲姞婊ら暅鍐嶄篃涓嶇敤涓嬭浇鍏朵粬 APP馃槄 浜嗐€傚疄渚嬪畬鏁寸増浠ｇ爜锛歨ttps://codepen.io/dragonir/p...鑺傜渷绌洪棿锛屾彁楂樼綉椤靛姞杞介€熷害瀹炶返璇佹槑锛屽悓涓€鍥剧墖鍑忓皬浜害鍜屽姣斿害鍙婅壊鐩搁ケ鍜屽害涔嬪悗鐨勪綋绉笌鍘熷浘鐩告瘮锛屽彲浠ュ噺灏忓緢澶т竴閮ㄥ垎浣撶Н绌洪棿 2M 宸﹀彸鐨勫浘鐗囩粡杩囧急鍖栧悗淇濆瓨锛屽氨鍙互鍘嬬缉鍒?1M 宸﹀彸銆傚湪缃戦〉涓垜浠彲浠ヤ娇鐢ㄧ粡杩?寮卞寲 鐨勫浘鐗囷紝鐒跺悗閫氳繃 CSS filter 灏嗗叾杩樺師銆傝繖鏍峰氨鍙互杈惧埌鍘嬬缉璧勬簮浣撶Н锛屾彁鍗囩綉椤靛姞杞介€熷害銆佹彁楂樼敤鎴蜂綋楠岀殑鐩殑銆傚叿浣撴搷浣滃彲闃呰浠ヤ笅鏁欑▼锛氬姣斿害浜ゆ崲鎶€鏈細浣跨敤 CSS filter 鎻愰珮鍥惧儚鎬ц兘 https://css-tricks.com/contra...鍏煎鎬т粠 caniuse 鏌ヨ缁撴灉鍙互鐪嬪嚭锛宑ss filter 灞炴€у湪鐜颁唬娴忚鍣ㄤ腑鐨勬敮鎸佹€у凡缁忓緢濂戒簡锛岄櫎浜?IE 娴忚鍣ㄤ箣澶栵紝鍏朵粬娴忚鍣ㄤ腑澶у鍙互姝ｅ父浣跨敤锛屽繀瑕佹椂鍙坊鍔犳祻瑙堝櫒鍐呮牳鍓嶇紑銆備絾鏄畼缃戜篃鏈変互涓?涓猧ssue 鎻愮ず锛岀浉淇″悗缁殢鐫€娴忚鍣ㄧ殑鍗囩骇锛岃繖浜涢棶棰樹篃浼氳閫愭淇锛氬湪 Safari 娴忚鍣ㄤ腑锛屽鏋滃瓙鍏冪礌鍏锋湁鍔ㄧ敾鏁堟灉锛屽垯涓嶄細琚簲鐢ㄦ护闀溿€傜洰鍓嶆病鏈夋祻瑙堝櫒鏀寔 drop-shadow 婊ら暅鐨?spread-radius 鏂规硶銆傚湪 Edge 娴忚鍣ㄤ腑濡傛灉鍏冪礌鎴栧瓙鍏冪礌琚缃簡 璐熷€紌-index锛屽垯鏃犳硶搴旂敤婊ら暅銆傛€荤粨鏈瘒鏂囩珷鍙槸绠€鍗曞垪涓句簡鍑犵浣跨敤 CSS filter 甯哥敤鐨勯〉闈㈡晥鏋滐紝鍏跺疄 filter 鐨勬瘡涓€绉嶅唴缃柟娉曢兘鍙互鏈夋棤闄愬彲鑳界殑鎵╁睍搴旂敤锛屽 invert 鍙嶈浆鑹插悓鏍蜂篃鍙互搴旂敤鍒?hover 鏁堟灉涓娿€佽皟鏁寸綉椤祍epia 瑜愯壊鍊煎彲浠ュ疄鐜版姢鐪兼晥鏋滅瓑銆傚彧瑕佸彂鎸ユ兂璞″姏鍜屽垱閫犲姏锛宖ilter 閮藉彲浠ュ湪瀹炶返涓緱鍒板緢濂界殑搴旂敤銆備互涓嬩竴浜涗緥瀛愬氨鏄緢濂界殑搴旂敤锛屽ぇ瀹舵湁鍏磋叮鍙互鎷撳睍闃呰瀛︿範锛氭瘺鐜荤拑鏁堟灉 https://codepen.io/KazuyoshiG...鐮寸鐜荤拑鏁堟灉 https://codepen.io/bajjy/pen/...浣跨敤filter瀹炵幇鐨刪over鏁堟灉 https://codepen.io/nxworld/de...鍙嶈壊鎸夐挳 https://codepen.io/monkey-com...鑰佺収鐗?https://codepen.io/dudleystor...楂樼骇鐗坒ilter缂栬緫鍣細https://codepen.io/stoumann/p...鏈€鍚庨檮涓婁竴寮犵敤涓婇潰婊ら暅缂栬緫鍣ㄨ皟鍑烘潵鐨?澶嶅彜鑾叞杩壊鎬у喎娣℃补鐢绘晥鏋?婊ら暅鍥剧墖銆傦紙鍝囧锛岃繖涔熷お鍝囧浜嗗惂锛孋SS 缁濈粷瀛?yyds馃ぃ锛夋枃绔犲湴鍧€锛歨ttps://segmentfault.com/a/11... 浣滆€咃細dragonir
