杩欑瘒鏂囩珷浠嬬粛缁欎綘浠枩娆紝鎴戣礋璐ｆ洿鏂皛杩欐鎴戝氨鐢ㄧ函CSS鍋氫竴涓渾鐐硅儗鏅紝鍏堢湅涓婂浘鐪嬬湅鏁堟灉銆傝繖涓晥鏋滄垜鍐欏湪body涓婁簡锛屽鏋滀笉鍠滄杩欎釜閰嶈壊鍙互鎵嬪姩鏀广€傛€濊矾瀹炵幇涓婂浘鏁堟灉鎴戠殑鎬濊矾鏄鍏堟兂鍒扮敤background-image锛岀劧鍚庣敤radial-gradient鐢讳竴涓渾銆傜粨鍚堥粯璁ょ殑鑳屾櫙鑹诧紝搴旇宸笉澶氬氨澶熶簡銆傞渶瑕佹彁閱掔殑鏄紝background-image涓嶄粎鍙互鎻掑叆鑳屾櫙鍥剧墖锛岃繕鍙互閫氳繃浠ｇ爜瀹炵幇娓愬彉鏁堟灉锛堜箣鍓嶉亣鍒拌繃涓€浜涘疄涔犵敓锛屼笉鐭ラ亾杩欎釜~锛夈€傛墍浠ユ垜鍋氫簡杩欎簺姝ラ锛氬皢body鐨勫搴﹀拰楂樺害璁剧疆涓?00%锛屽皢杈硅窛璁剧疆涓?锛岃缃粯璁よ儗鏅壊background-color锛岃缃渾褰㈣儗鏅痓ackground-image:radial-gradient浠ｇ爜鍙樻垚杩欐牱<鏍峰紡>涓讳綋{瀹藉害锛?00%锛涢珮搴︼細100%锛涗繚璇侀噾锛?锛涜儗鏅壊锛?655锛涜儗鏅浘鍍忥細寰勫悜娓愬彉锛?f5dab830%锛岄€忔槑0锛夛紱鑳屾櫙澶у皬锛?0px60px锛泒鎴戜娇鐢╞ackground-size鏉ヨ缃偣鐨勫ぇ灏忋€傚ぇ瀹跺彲浠ユ牴鎹嚜宸遍」鐩殑瀹為檯闇€瑕佹潵璁剧疆銆傛湁鐐逛綔鐢紝浣嗘鏃舵尝鐐规帓鍒楁湁搴忋€傛垜鎯宠杩欎簺鍦嗙偣浜ら敊鎺掑垪銆備簬鏄垜鍙堟兂鍒帮紝鍙互澶氬仛涓€灞傛尝鐐癸紝鐒跺悗鐢╞ackground-position閿欏紑2灞傛尝鐐圭殑鎺掑垪銆備负浜嗕繚鎸佷氦閿欐帓鍒楀悗鐨勬暣榻愭劅锛屾垜閲囩敤鐨勬墜娉曟槸浜ら敊璺濈涓哄渾鐐瑰ぇ灏忕殑涓€鍗娿€傚嵆background-position=background-size/2銆傚綋鐒惰繖鍙ヨ瘽鏄吉浠ｇ爜銆傛敼杩涘悗鐨勪唬鐮佸鍔犱簡涓ゅ彞锛?*鐪佺暐閮ㄥ垎浠ｇ爜*/background-image:radial-gradient(#f5dab830%,transparent0),radial-gradient(#f5dab830%,transparent0);background-size:60px60px;鑳屾櫙浣嶇疆锛?0,30px30px;background-image涓湁2灞俽adial-gradient锛宐ackground-position涔熷垎鍒缃簡姣忎竴灞傜殑浣嶇疆銆傛渶缁堟晥鏋滃涓嬪畬鏁翠唬鐮?style>body{width:100%;楂樺害锛?00%锛涗繚璇侀噾锛?锛涜儗鏅壊锛?655锛涜儗鏅浘鍍忥細寰勫悜娓愬彉锛?f5dab830%锛岄€忔槑0锛夛紝寰勫悜娓愬彉锛?f5dab830%锛岄€忔槑0锛夛紱鑳屾櫙澶у皬锛?0px60px锛涜儗鏅綅缃細00,30px30px;}鎺ㄨ崘闃呰馃憤鈾傘€婄函CSS锛氬姩鎬佹笎鍙樿儗鏅€愪竴鍒嗛挓瀛︿細銆戙€嬸煈嶃€婄函css瀹炵幇117涓狶oading鏁堟灉銆嬸煈嶃€婄函CSS瀹炵幇銆庢枒椹汗鐞嗘姇褰辨枃瀛椼€忋€嬸煈嶃€婂浣曠敤 CSS 閫夋嫨绗﹀共鎺夐槦鍙嬨€嬸煈嶃€婂浣曠敤 CSS 閫夋嫨绗﹀共鎺夐槦鍙嬨€嬸煈嶃€婅繖18涓綉绔欒兘璁╀綘鐨勯〉闈㈣儗鏅偒閰疯捣鏉ャ€嬪枩娆?鍏虫敞+鏀惰棌=瀛︿範浜嗗枩娆?鍏虫敞+鏀惰棌=瀛︿範浜?/p>
