Css如何设置span的背景颜色和背景图片？ 在Css中如何设置span的背景颜色和背景图片
\u5728Css\u4e2d\u5982\u4f55\u8bbe\u7f6espan\u7684\u80cc\u666f\u989c\u8272\u548c\u80cc\u666f\u56fe\u7247\uff1f\u7ed9span\u589e\u52a0\u4e00\u4e2aclass\uff0c\u4f8b\u5982\uff1a
\u6587\u5b57
\u7136\u540ecss\u91cc\u5199\u4e0a\uff1a
.title { background: #000 url("\u80cc\u666f\u56fe\u7247\u5730\u5740"); }
\u80cc\u666f\u989c\u8272
\u8fd9\u4e2a\u662f\u7528\u6765\u8bbe\u7f6e\u80cc\u666f\u989c\u8272\u7684\uff0c\u5c55\u73b0\u6548\u679c\u5982\u4e0b\uff1a
\u53ef\u4ee5\u53e6\u5916\u8bbe\u7f6e\u8fd9\u4e2a\u5bbd\u5ea6\u5927\u5c0f\uff0c\u7559\u4e00\u4e9b\u7a7a\u4f59\u7684\u5730\u65b9\u4f1a\u66f4\u597d\u770b
\u6807\u7b7e\u662f\u4e0d\u80fd\u8bbe\u7f6e\u80cc\u666f\u56fe\u7247\u7684\uff0c\u8fd9\u4e2a\u662f\u7528\u6765\u8bbe\u7f6e\u6587\u5b57\u7684\u6837\u5f0f\u7684\u3002\u53ef\u4ee5\u5728span\u6807\u7b7e\u4e4b\u524d\u6dfb\u52a0\u4e00\u4e2a
\u4ee3\u7801\u548c\u6548\u679c\u5982\u4e0b\uff1a
<span style="background-color:#FF0000">背景颜色</span>
这个是用来设置背景颜色的，展现效果如下：
给span增加一个class，例如：
<span class="title">文字</span>
然后css里写上：
.title { background: #000 url("背景图片地址"); }
绛旓細<span>鏍囩鏄笉鑳借缃儗鏅浘鐗囩殑锛岃繖涓槸鐢ㄦ潵璁剧疆鏂囧瓧鐨勬牱寮忕殑銆傚彲浠ュ湪span鏍囩涔嬪墠娣诲姞涓涓<div></div> 浠ｇ爜鍜屾晥鏋滃涓嬶細
绛旓細1銆佽缃竟妗嗗拰鑳屾櫙鑹查渶瑕佷娇鐢╟ss鐨刡order鍜宐ackground灞炴銆傚叿浣撶殑鐢ㄦ硶鏄紝棣栧厛鎵撳紑html缂栬緫鍣紝鍦ㄧ┖鐧界殑html鏂囦欢涓紝鏂板缓涓涓猟iv鍜宻pan鏍囩锛屽苟鍦ㄤ笂鏂筯ead閲岃缃畇tyle鏍囩锛2銆佹帴鐫鍦╯tyle鏍囩涓缃畇pan鍜宒iv鐨勬爣绛撅紝棣栧厛缁欏畠浠搴﹀拰楂樺害锛屾帴鐫缁欎粬浠缃笉鍚岄鑹诧紝鏈鍚庤缃竟妗哹order锛宐order灞炴х殑3涓...
绛旓細缁span澧炲姞涓涓猚lass锛屼緥濡傦細鏂囧瓧鐒跺悗css閲屽啓涓婏細.title { background: #000 url("鑳屾櫙鍥剧墖鍦板潃"); }
绛旓細灏嗛夋嫨绫诲瀷璁剧疆~涓虹被锛屽悕绉拌缃负~娴嬭瘯锛屽畾涔夊湪~浠呭璇ユ枃妗ｏ紝鐐瑰嚮鈥滅‘瀹氣濋殢鍚庡脊鍑哄浘涓嬩腑鎵绀虹殑娴嬭瘯CSS瑙勫垯瀹氫箟 鍦css瀹氫箟妗嗕腑鎴戜滑鏄彲浠ョ湅鍒般傜被鍨嬭儗鏅尯鍧楁柟妗嗚竟妗嗗垪琛ㄥ畾浣嶆墿灞曘傚湪绫诲瀷妗嗕腑灏嗗瓧浣撳ぇ灏忥紝鏍峰紡銆佽楂樼瓑杩涜璁剧疆 闅忓悗鏄釜鑳屾櫙鐨勮缃锛岃繖閲屾垜浠槸鍙互璁剧疆鑳屾櫙棰鑹插拰鑳屾櫙鍥惧儚鐨勮繖閲岃繕鍙互璁剧疆鍖...
绛旓細1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓坊鍔燿iv鏍囩锛岀劧鍚庡湪div鏍囩涓坊鍔犱竴浜泂pan鏍囩锛2銆佹坊鍔爏tyle鏍囩骞跺畾涔変竴涓被锛屼负杩欎釜绫昏缃産order-color灞炴э紝灞炴у间负杈规鐨勯鑹诧紝鐒跺悗灏嗚繖涓被寮曠敤鍒癲iv鍜宻pan鏍囩涓婏紝杩欐椂div鍜宻pan灏辫娣诲姞涓婁簡杈规棰滆壊锛3銆佷负涔嬪墠璁剧疆鐨勭被娣诲姞background灞炴э紝灞炴у间负鑳屾櫙棰滆壊锛岃繖鏃...
绛旓細1.浣跨敤鏂规硶锛氬湪HTML鏂囦欢涓殑head鏍囩涓姞鍏<link rel="stylesheet" type="text/css" href="css鏂囦欢璺緞" > 鐒跺悗鍦ㄥ搴旂殑css鏂囦欢涓姞鍏ヤ唬鐮侊紝濡傦細span{color:blue锛泒鎴栧叾浠栭夋嫨鍣ㄣ2.浣跨敤鏂规硶锛氬湪HTML鏂囦欢涓殑head鏍囩涓姞鍏<style type="text/css"></style>涓姞鍏ヤ唬鐮侊紝濡傦細span{color:blue锛泒...
绛旓細<style> 杩欎釜鏄被閫夋嫨鍣ㄥ啓鐨勯鑹叉牱寮 .red{ color:yellow;} 杩欎釜鏄爣绛鹃夋嫨鍣ㄥ啓鐨勯鑹叉牱寮 span{ color:yellow;} </style> <span class="yellow">yellow</span>
绛旓細<span style="background-color:#FF0000 ">涓嶆槸鍦╤ead涓畾涔夛紝鑰屾槸鍦ㄥ崟涓殑span涓姞鍏css鏍峰紡锛鎬庝箞鍐欎簡锛</span> 濡傛鍙互鐩存帴鐢ㄥ睘鎬ф帶鍒 褰撶劧灞炴ф湁寰堝 鎴戝彧鍙栦簡鍏朵腑涔嬩竴 鏂囧瓧鑳屾櫙鑹诧紒
绛旓細鈼 font - 瀛椾綋璁惧畾(涓嶆帹鑽)鈼 i - 鏂滀綋 鈼 img - 鍥剧墖 鈼 input - 杈撳叆妗 鈼 kbd - 瀹氫箟閿洏鏂囨湰 鈼 label - 琛ㄦ牸鏍囩 鈼 q - 鐭紩鐢 鈼 s - 涓垝绾(涓嶆帹鑽)鈼 samp - 瀹氫箟鑼冧緥璁＄畻鏈轰唬鐮 鈼 select - 椤圭洰閫夋嫨 鈼 small - 灏忓瓧浣撴枃鏈 鈼 span - 甯哥敤鍐呰仈瀹瑰櫒锛屽畾涔夋枃鏈唴鍖哄潡 ...
绛旓細css浠ｇ爜娣诲姞鑳屾櫙鍥剧墖锛1锛鑳屾櫙棰鑹诧細background-color 璇硶锛歿background-color:鏁板紏 娉ㄦ剰锛氬湪html褰撲腑锛岃涓烘煇涓璞″姞涓婅儗鏅壊鍙湁涓绉嶅姙娉曪紝閭ｅ氨鏄厛鍋氫竴涓〃鏍硷紝鍦ㄨ〃鏍间腑璁剧疆瀹岃儗鏅壊锛屽啀鎶婂璞℃斁杩涘崟鍏冩牸銆傝繖鏍峰仛姣旇緝楹荤儲锛屼笉浣嗕唬鐮佽緝澶氾紝杩樿涓鸿〃鏍肩殑澶у皬鍜屽畾浣嶄激浜涜剳绛嬨傝〃鏍艰儗褰遍鑹诧細style="...
