神奇的CSS让文字智能适配背景色
杩欏嚑澶╂湁濂藉嚑涓悓瀛﹂棶浜嗗悓鏍风殑闂銆傞〉闈笂鏈変竴娈垫枃瀛楋紝杩欐鏂囧瓧鍦ㄤ笉鍚岀殑鑳屾櫙鑹蹭笅鍙互鏄剧ず涓嶅悓鐨勯鑹插悧锛熶織绉版櫤鑳藉彉鑹层€傚儚杩欐牱锛氭枃鏈樉绀轰负榛戝簳鐧藉瓧鍜岀櫧搴曢粦瀛椼€傜湅浼煎緢澶嶆潅鐨勬晥鏋滐紝鍏跺疄鐢–SS寰堝鏄撳疄鐜般€備粖澶╁氨鏉ヤ粙缁嶈繖涔堜竴涓皬鎶€宸с€傚湪CSS涓紝浣跨敤娣峰悎妯″紡mix-blend-mode:difference璁╂枃鏈櫤鑳介€傚簲鑳屾櫙鑹层€傛贩鍚堟ā寮弇ix-blend-mode锛歞ifferenceCSS3澧炲姞浜嗕竴涓緢鏈夋剰鎬濈殑灞炴€р€斺€攎ix-blend-mode锛屽叾涓璵ix鍜宐lend鐨勪腑鏂囩炕璇戞槸娣峰悎鐨勶紝鎵€浠ョ洿鎺ョ炕璇戣繖涓睘鎬х殑浣滅敤涓烘贩鍚堟贩鍚堟ā寮忥紝褰撶劧锛屾垜浠€氬父绉颁箣涓烘贩鍚堟ā寮忋€傛湁濡備笅鍥炬墍绀虹殑鍑犵娣峰悎妯″紡锛氬叾涓紝鏈枃鐨勪富瑙掓槸mix-blend-mode:difference锛屽嵆宸紓妯″紡銆傝繖绉嶆贩鍚堟ā寮忔煡鐪嬫瘡涓€氶亾涓殑棰滆壊淇℃伅锛屽皢鍩鸿壊涓庢补婕嗛鑹茶繘琛屾瘮杈冿紝骞朵粠杈冧寒鍍忕礌鐨勫儚绱犲€间腑鍑忓幓杈冩殫鍍忕礌鐨勫儚绱犲€笺€備笌鐧借壊娣峰悎浼氬弽杞簳鑹诧紱涓庨粦鑹叉贩鍚堜笉浼氫骇鐢熶换浣曞彉鍖栥€傞€氫織涓€鐐瑰氨鏄笂灞傜殑浜尯浼氬弽杞笅灞傜殑棰滆壊锛屾殫鍖烘甯告樉绀洪鑹诧紝鏁堟灉鍜屽師鍥惧畬鍏ㄧ浉鍙嶃€傝繖绉嶆贩鍚堟ā寮忔渶甯歌鐨勫簲鐢ㄥ満鏅氨鏄枃绔犲紑澶存弿杩扮殑鍦烘櫙锛屽彲浠ヨ鏂囨湰鍦ㄤ笉鍚岀殑鑳屾櫙鑹蹭笅鏄剧ず鍑轰笉鍚岀殑棰滆壊銆傛渶閫傚悎榛戠櫧鍦烘櫙锛屼竴涓緢绠€鍗曠殑DEMO锛?div>
div{height:100vh;鑳屾櫙锛氱嚎鎬ф笎鍙橈紙45deg锛?0000锛?00050%锛?fff50%锛夛紱&::before{鍐呭:"LOREMIPSUM";浣嶇疆锛氱粷瀵癸紱椤堕儴锛?0%锛涘乏锛?0%锛涜浆鎹細缈昏瘧锛?50%锛?50%锛夛紱棰滆壊锛?fff锛涙贩鍚堟贩鍚堟ā寮忥細宸紓锛涘姩鐢伙細绉诲姩3s鏃犻檺绾挎€т氦鏇匡紱}}@keyframes绉诲姩{0%{鍙樻崲锛氱炕璇戯紙-30%锛?50%锛夛紱}100%{杞崲锛氱炕璇戯紙-70%锛?50%锛夛紱}}鏁堟灉濡備笅锛欳odePenDemo--linear-gradient+Mix-blend-mode褰撶劧涔熶笉涓€瀹氶潪瑕侀粦鎴栬€呯櫧锛岀湅涓嬮潰鐨勪緥瀛愶紝鏈夎繖涔堜竴涓満鏅紝鏈夋椂鍊欐垜浠篃涓嶇‘瀹氬叧浜庤儗鏅壊鐨勬渶缁堟€ц兘鍊硷紙鍙兘鏄儗鏅厤缃紝浼犻€掔粰鍓嶇锛夛紝浣嗘槸瑕佽鏂囧瓧鍦ㄤ换浣曡儗鏅壊涓嬮兘鑳芥甯告樉绀恒€傝繖鏃跺€欎篃鍙互灏濊瘯浣跨敤mix-blend-mode:difference銆?ulclass="flex-box">
寮€閫氫細鍛樻煡鐪嬫垜鐨刅IP绛夌骇
//.....div{//涓嶇‘瀹氱殑鑳屾櫙鑹瞹p{color:#fff;mix-blend-mode:difference;}涓嶇鑳屾櫙鑹叉槸浠€涔堬紝甯ix-blend-mode:difference鐨?p>鍏冪礌閮借兘姝ｅ父鏄剧ず鏂囧瓧锛欳odePenDemo--mix-blend-mode:difference瀹炵幇鏂囧瓧棰滆壊鑷€傚簲鑳屾櫙鑹瞞ix-blend-mode:difference鐨勭己鐐瑰綋鐒惰繖涓柟娉曞苟涓嶅畬缇庯紝鍥犱负閫氳繃mix-blend-mode:difference鍙犲姞鑳屾櫙鑹插悗铏界劧鍙互姝ｅ父鏄剧ず棰滆壊锛屼絾涓嶄竴瀹氭槸鏈€鍚堥€傜殑棰滆壊锛屾樉绀烘晥鏋滄渶濂界殑棰滆壊銆傝繖閲屽疄闄呬娇鐢ㄧ殑鏃跺€欙紝鍦ㄩ潪榛戠櫧鍦烘櫙涓嬶紝杩橀渶瑕佹洿澶氱殑瀹為獙鏉ュ仛鍙栬垗銆傛渶鍚庢€荤粨涓€涓嬶紝鏈枃浠嬬粛涓€涓娇鐢–SS娣峰悎妯″紡瀹炵幇鏂囧瓧閫傞厤鑳屾櫙鏄剧ず鐨勫皬鎶€宸с€傚鏋滀綘瀵规贩鍚堟ā寮忔劅鍏磋叮锛屾帹鑽愪綘鐪嬩笅鎴戠殑鏂囩珷锛氫笉鍙€濊鐨勬贩鍚堟ā寮弇ix-blend-modeincredible娣峰悎妯″紡background-blend-mode涓よCSS浠ｇ爜瀹炵幇浠绘剰棰滆壊鐫€鑹叉妧鏈瀯寤烘笎鍙樿壊QR浣跨敤CSS缂栧啓浠ｇ爜鐔熺粌鐨凜SS鎶€宸绮惧僵浣跨敤娣峰悎妯″紡瀹炵幇鏂囧瓧闀傜┖娉㈡氮鏁堟灉CSS娣峰悎妯″紡\婊ら暅鏁堟灉鎺㈢储CSS3D澶辫触闂CSS缇庢湳鈥斺€斾娇鐢ㄨ儗鏅埗浣滃悇绉嶇簿褰╄儗鏅ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涘彲浠ュ府鍒颁綘:)鎯宠幏鍙栨渶鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿--iCSS鍓嶇濂囬椈馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github--iCSS锛屾寔缁洿鏂颁腑銆傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
