涓€銆佽儗鏅壊闀傜┖锛熶粈涔堢帺鎰忥紵
鍏跺疄鍦?0骞寸殑鏃跺€欙紝3骞村墠鎴戝氨浠嬬粛杩囪儗鏅壊闀傜┖鎶€鏈紝鏂囩珷鍚嶄负锛?ldquo;浣跨敤CSS瀹炵幇Photoshop閫夊尯鏁堟灉鍙婂簲鐢?rdquo;銆?/p>
瀹炵幇鐨勫氨鏄被浼间笅闈㈢殑鏁堟灉銆傝櫄妗嗘槸涓猤if鍔ㄧ敾鑳屾櫙锛屾按鏋滃浘鐗?鍍忕礌闀傜┖锛屼簬鏄氨鏈夋晥鏋滃暒锛?/p>
浠婂ぉ鎴戦€涚綉椤电殑鏃跺€欙紝瑙佸埌浜嗚繖绉嶆妧鏈洿涓哄疄闄呯殑搴旂敤銆?/p>
鐪嬩笅鍥炬墍绀虹殑鏁堟灉鎴浘锛?/p>
闂锛氳繖浜涘皬鍥炬爣鏄浣曞疄鐜扮殑鍛紵
褰撲笅锛屾垜浠竴鑸殑鍋氭硶鏄紝鎵撳紑photoshop锛屾妸杩欎簺鍥炬爣鎶犲嚭鏉ワ紝鐒跺悗鍛ㄨ竟閫忔槑锛屼互鐢ㄥ湪鍚勭鑳屾櫙涓娿€?/p>
鐒惰€岋紝twitter鐨勪笂鍥炬晥鏋滄槸鐩稿弽鐨勫仛娉曪紝鍥炬爣褰㈢姸鍖哄煙鏄€忔槑闀傜┖鐨勶紝鑰屽懆杈规槸瀹炶壊鐨勩€?/p>
杩欑瀹炵幇鐨勪紭鐐逛笉瑷€鑰屽柣锛屽彲浠ュ緢鑷湪寰楁帶鍒跺皬鍥炬爣鐨勯鑹诧紝鑰岃繖涓帶鍒跺氨鏄疌SS鐨?code>background-color.
浜屻€乥ackground-color涓庤儗鏅浘闀傜┖鎶€鏈?/strong>
鎮ㄥ彲浠ョ嫚鐙犲湴鐐瑰嚮杩欓噷锛氳儗鏅壊闀傜┖鎶€鏈笌棰滆壊鍙帶鍥炬爣demo
Chrome娴忚鍣ㄤ笅锛屾湁color鎺т欢锛?/p>
</p>
<p>.icon {</p>
<p> display: inline-block;</p>
<p> width: 16px; height: 20px;</p>
<p> background-image: url(sprite_icons.png);</p>
<p> background-color: #34538b; /* 璇ラ鑹叉帶鍒跺浘鏍囩殑棰滆壊 */</p>
<p>}</p>
<p>.icon1 { background-position: 0 0; }</p>
<p>.icon2 { background-position: -20px 0; }</p>
<p>.icon3 { background-position: -40px 0; }</p>
<p>.icon4 { background-position: -60px 0; }<i class="icon icon1"></i><a href="##" class="link">杩斿洖</a></p>
<p><i class="icon icon2"></i><a href="##" class="link">鍒锋柊</a></p>
<p><i class="icon icon3"></i><a href="##" class="link">鏀惰棌</a></p>
<p><i class="icon icon4"></i><a href="##" class="link">灞曞紑鍥剧墖</a></p>
<p>
涓夈€佽鎶€鏈殑灞€闄愭€?
灞€闄愭€ф湁涓ょ偣锛?/p>
鍥炬爣鎵€鍦ㄧ殑鑳屾櫙鑹茬函鑹诧紝涓斾笉浼氱粡甯稿彉鍖栵紱
鍙兘鏄函鑹叉垨鑰呮笎鍙樻€ц川鐨勫浘鏍囧彲浠ヤ娇鐢ㄨ鎶€鏈€?/p>
鍥涖€佽嚜宸辨洿杩涗竴姝ユ敼杩?color瀹炵幇
浠ヤ笅涓鸿嚜宸辩殑灏濊瘯锛岃繕娌℃湁澶ц妯℃祴璇曪紝鍙兘鏌愪簺鍥藉鎴栨煇浜涜澶囦細鏈夐棶棰橈紝娆㈣繋鍙嶉銆?/p>
閫氳繃background-color鎺у埗鍥炬爣棰滆壊宸茬粡闈炲父鐏垫椿浜嗭紝浣嗘槸锛岃繕涓嶆槸瓒冲鐏垫椿銆備妇涓緥瀛愶紝鎴戝笇鏈涘浘鏍囩殑棰滆壊鐩存帴涓庡悗闈㈢殑鏂囧瓧涓€鑷达紝鏂囧瓧棰滆壊(color)鍙互鐩存帴浠庣埗绾х户鎵匡紝浣嗘槸鍥炬爣濡傛灉鏄痓ackground-color瀹炵幇锛屽垯涓嶈兘缁ф壙锛岄偅鑳戒笉鑳戒娇鐢╟olor瀹炵幇鍥炬爣鏁堟灉鍛紵
绛旀鏄彲浠ョ殑锛?/p>
鎬濊矾濡備笅锛屼娇鐢ㄥ瓧绗﹀疄鐜板疄鑹茶儗鏅晥鏋滐紱鐒跺悗锛岄晜绌鸿儗鏅浘瑕嗙洊鍦ㄤ笂闈紝浜庢槸鏁堟灉瀹炵幇锛宱ver!
鑴戜腑甯稿寰堝濂囨€瓧绗︼紝鍥犳锛岀涓€鍙嶅簲灏辨槸杩欏幃锛氣枅锛岃瀛楃杩炲啓灏辨槸涓潡鐘跺尯鍩熴€?ldquo;鑰佹澘锛屾潵涓硸钁姦”锛屸枅鈻堚枅鈻堚枅鈻?/p>
鎴戜滑绋嶅井璁╄繖涓瓧绗﹀瓧鍙峰ぇ鐐癸紝灏卞彲浠ユ拺婊″浘鏍囧鍣紝浜庢槸锛宑olor瀹炵幇鐨勪吉鑳屾櫙鑹叉晥鏋滃氨鍙互瀹炵幇浜嗭紒
涓婇潰涓轰簡鍗曟爣绛惧疄鐜帮紝鎵€浠ヤ娇鐢ㄤ簡before涓巃fter浼厓绱狅紝鍥犳锛孖E8+娴忚鍣ㄦ敮鎸侊紝IE6/IE7娴忚鍣ㄩ叡娌逛腑……
鐩墠鐧惧害娴忚鐮旂┒闄㈢殑鏁版嵁鏉ョ湅锛孖E6/IE7浠ュ娴忚鍣ㄥ凡瓒呰繃80%+锛?鍥犳锛屾潯浠跺厑璁革紝杩欎袱涓祻瑙堝櫒灏卞彲浠ュ拷鐣ヤ簡銆?/p>
鐩稿叧CSS濡備笅锛?/p>
</p>
<p>.icon {</p>
<p> display: inline-block;</p>
<p> width: 16px; height: 20px;</p>
<p> overflow: hidden;</p>
<p> position: relative;</p>
<p>}</p>
<p>.icon:before {</p>
<p> content: '鈻?;</p>
<p> margin: -5px 0 0 -5px;</p>
<p> font-size: 30px;</p>
<p> position: absolute; </p>
<p>}</p>
<p>.icon:after {</p>
<p> content: '';</p>
<p> display: block;</p>
<p> width: 100%; height: 100%;</p>
<p> background-image: url(sprite_icons.png);</p>
<p> position: relative;</p>
<p>}</p>
<p>.icon1:after { background-position: 0 0; }</p>
<p>.icon2:after { background-position: -20px 0; }</p>
<p>.icon3:after { background-position: -40px 0; }</p>
<p>.icon4:after { background-position: -60px 0; }</p>
<p>.out { color: #34538b; /* 鐖舵爣绛句笂鐨勮棰滆壊鎺у埗鍥炬爣鐨勯鑹?*/}</p>
<p>
濡傛灉鎮ㄥ笇鏈涘吋瀹笽E6/IE7娴忚鍣紝涔熸槸鍙互鐨勶紝闇€瑕佸涓€灞傛爣绛撅紝濡備笅锛?/p>
</p>
<p><p class="out"></p>
<p> <i class="icon icon1"><s></s>鈻?lt;/i><a href="##" class="link">杩斿洖</a></p>
<p> <i class="icon icon2"><s></s>鈻?lt;/i><a href="##" class="link">鍒锋柊</a></p>
<p> <i class="icon icon3"><s></s>鈻?lt;/i><a href="##" class="link">鏀惰棌</a></p>
<p> <i class="icon icon4"><s></s>鈻?lt;/i><a href="##" class="link">灞曞紑鍥剧墖</a></p>
<p></p></p>
<p>
</p>
<p>.icon {</p>
<p> display: inline-block;</p>
<p> width: 16px; height: 20px;</p>
<p> line-height: 20px;</p>
<p> font-size: 30px;</p>
<p> overflow: hidden;</p>
<p> position: relative;</p>
<p>}</p>
<p>.icon s {</p>
<p> width: 100%; height: 100%;</p>
<p> background-image: url(sprite_icons.png);</p>
<p> position: absolute; left: 0; top: 0;</p>
<p>}</p>
<p>.icon1 s { background-position: 0 0; }</p>
<p>.icon2 s { background-position: -20px 0; }</p>
<p>.icon3 s { background-position: -40px 0; }</p>
<p>.icon4 s { background-position: -60px 0; }</p>
<p>.out { color: #34538b; /* 鐖舵爣绛句笂鐨勮棰滆壊鎺у埗鍥炬爣鐨勯鑹?*/}</p>
<p>
涓嬪浘涓篒E7娴忚鍣ㄤ笅鎴浘锛?/p>
杞浇璇锋敞鏄庢潵鑷紶閼棴-閼┖闂?閼敓娲?/p>
经验首页