鏈枃浠嬬粛鐐硅禐+涔︾+鍏虫敞=杩欐瀛︿細浜嗙敤CSS鐢绘牸瀛愯儗鏅€傚苟涓€姝ユ鍒嗘瀽濡備綍瀹炵幇~鎬濊矾鐩存帴缁欏嚭浜嗙瓟妗堬細姝ｆ柟褰㈡槸鐢变袱涓浉绛夌殑鐩磋涓夎褰㈡嫾鎺ヨ€屾垚銆傚彲浠ヤ娇鐢ㄨ儗鏅浘鍍忔笎鍙樻潵瀹炵幇涓夎褰€俬tml,body{淇濊瘉閲?0;瀹藉害锛?00%锛沨eight:100%;}body{background-image:linear-gradient(45deg,#00025%,transparent0);}姝ゆ椂鐨勬晥鏋滃涓婂浘鎵€绀恒€傚仛涓€涓?5搴︾殑LinearGradient锛岀涓€绉嶉鑹?000锛堥粦鑹诧級锛屽崰鏁翠釜鑳屾櫙鑹插潡鐨?5%锛屽叾浣欎负绾㈣壊銆傚熀浜庝互涓婏紝浣跨敤background-size鏉ユ帶鍒惰儗鏅ˉ涓佺殑澶у皬銆俠ody{鑳屾櫙鍥惧儚锛氱嚎鎬ф笎鍙橈紙45deg锛?00025%锛岄€忔槑0锛夛紱background-size:200px200px;}鐭ラ亾鍚楋紵杩欐椂鍊欏鏋滄垜浠啀鐢讳竴涓粦鑹茬殑鐩磋涓夎褰㈠€掕繃鏉ワ紝鏀惧湪涓€璧蜂笉灏辨垚浜嗘鏂瑰舰浜嗗悧锛熸€庝箞鐢诲€掍笁瑙掑舰锛熸垜灏濊瘯灏嗛粦鑹蹭粠25%鏇存敼涓?5%锛屾垜灏嗗緱鍒颁互涓嬫晥鏋渂ody{background-image:linear-gradient(45deg,#00075%,transparent0);background-size:200px200px;}鍙互鐪嬪埌绾㈣壊涓夎褰㈡槸鍘熸潵榛戣壊涓夎褰㈢殑鍙嶉潰銆傚皢涓婂浘涓殑鈥滅櫧鑹蹭笁瑙掑舰鈥濆彉鎴愰粦鑹诧紝骞朵繚鐣欏師鏉ョ殑榛戣壊涓夎褰紙25%锛夈€傛墍浠ユ垜鍔犱簡鏇村灞傛笎鍙榽body{background-image:linear-gradient(45deg,#00025%,transparent0),linear-gradient(45deg,transparent75%,#0000);background-size:200px200px;}绠€鍖栦唬鐮侊細body{background-image:linear-gradient(45deg,#00025%,transparent0,transparent75%,#0000);鑳屾櫙灏哄锛?00px200px锛涙晥鏋滐紝鐒跺悗绉诲姩鍏朵腑涓€灞傜殑浣嶇疆锛屽悎骞舵垚涓€涓粦鑹叉柟鍧椼€俠ody{鑳屾櫙鍥惧儚锛氱嚎鎬ф笎鍙橈紙45deg锛?00025%锛岄€忔槑0锛岄€忔槑75%锛?0000锛夛紝绾挎€ф笎鍙橈紙45deg锛?00025%锛岄€忔槑0锛岄€忔槑75%锛?0000);鑳屾櫙浣嶇疆锛?0,100px100px;鑳屾櫙灏哄锛?00px200px锛泒浣犲畬鎴愪簡銆傛渶鍚庤鎻愰啋鐨勬槸锛屽湪杩欎釜渚嬪瓙涓紝background-position鐨勭浜屼釜姊害鐨勪綅绉绘槸background-size鐨勪竴鍗婏紝杩欐牱灏卞彲浠ュ疄鐜拌繖涓綉鏍艰儗鏅簡~瀹屾暣浠ｇ爜杩欐槸鍒朵綔鑳屾櫙鐨勫畬鏁翠唬鐮併€傛帹鑽愰槄璇火煈嶃€奀SS閲岀殑ch鍒板簳鏄粈涔堜笢瑗匡紵銆嬸煈嶃€婄粰console鏉ョ殑鏍峰紡銆嬸煈嶃€婂浣曠敤 CSS 閫夋嫨绗︽潃姝婚槦鍙嬨€嬸煈嶃€婅繖18涓綉绔欒兘璁╀綘鐨勯〉闈㈣儗鏅偒閰疯捣鏉ャ€嬸煈嶃€婄函CSS锛氬姩鎬佹笎鍙樿儗鏅€愪竴鍒嗛挓瀛︿細銆戙€嬸煈嶃€婄函css瀹炵幇117涓狶oading鏁堟灉銆嬬偣璧?鍏虫敞+鏀惰棌=瀛︿範浜?/p>
