在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
<span style="background-color:#FF0000">背景颜色</span>
这个是用来设置背景颜色的，展现效果如下：
可以另外设置这个宽度大小，留一些空余的地方会更好看
<span>标签是不能设置背景图片的，这个是用来设置文字的样式的。可以在span标签之前添加一个<div></div>
代码和效果如下：
背景颜色 background-color:#颜色代码; 例如：background-color:#ff0000;
背景图片 background-image:url(图片路径名字); 例如：background-image:url(/images/123.gif);
给span增加一个class，例如：
<span class="title">文字</span>
然后css里写上：
.title { background: #000 url("背景图片地址"); }
给span增加一个class，例如：
<span class="title">文字</span>
然后css里写上：
.title { background: #000 url("背景图片地址"); }
绛旓細浣犺繖涓棶棰樻秹鍙婂埌CSS閫夋嫨鍣紝浣犵幇鍦璁剧疆鐨勬槸鍏冪礌閫夋嫨鍣:span锛屼綘瑕佹瘡涓猻pan涓嶅悓鐨勮瘽锛屾寜鐓т綘鐜板湪鐨勪唬鐮侊紝鏈绠鍗曠殑灏辨槸鐢 ID 閫夋嫨鍣ㄥ氨琛屼簡锛屽叾涓紝浣犵殑 span 鐨 id 鍛藉悕蹇呴』浣跨敤鑻辨枃瀛楁瘝寮澶达紝涓嶈兘鐢ㄦ暟瀛楀紑澶达紝鍙互鎹㈡垚 id="d1" 杩欐牱 锛 d1 ,d2 ,d3 锛屽彟澶栵紝涓涓綉椤典腑锛宨d 鍏锋湁鍞竴鎬э紝...
绛旓細涓嬮潰鏄垜淇敼鐨勪唬鐮侊細.idSpan{display:inline-block;border:1px solid #999999;margin:2px;padding:5px 10px;background-color: #d0f7c1;font:20px/20px "骞煎渾","妤蜂綋","瀹嬩綋",Arial,sans-serif;text-align:center;cursor:pointer;} //瑙ｉ噴涓涓嬩负浠涔堥渶瑕佸姞display:inline-block锛涘洜涓鍦╟ss涓鍒...
绛旓細1銆佹柊寤轰竴涓猦tml鏂囦欢锛屽懡鍚嶄负test.html銆2銆佸湪test.html鏂囦欢鍐咃紝浣跨敤p鏍囩鍒涘缓涓琛屾枃瀛楋紝骞跺湪p鏍囩鍐呮坊鍔span鏍囩銆3銆佸湪test.html鏂囦欢鍐咃紝璁剧疆p鏍囩鐨刢lass灞炴т负mycss銆4銆鍦╟ss鏍囩鍐咃紝閫氳繃class璁剧疆p鏍囩鐨勬牱寮忥紝璁剧疆瀹冪殑鑳屾櫙棰滆壊涓虹伆鑹诧紝瀹藉害涓200px锛岄珮搴︿负50px銆5銆佸湪css鏍囩鍐咃紝鍐嶄娇鐢╨ine-...
绛旓細鍦ㄧ綉椤佃璁＄殑绮剧編鐢诲嵎涓紝span</杩欎竴琛屽唴鍏冪礌瀹涘绮惧阀鐨勭敾绗旓紝涓烘垜浠弿缁樺嚭鐙壒鐨勬枃瀛楀憟鐜版柟寮忋備笉鍚屼簬鍧楃骇鏍囩濡傚拰锛屽畠涓嶄細寮曞彂鎹㈣锛岃屾槸绱у瘑鍦拌瀺鍏ユ枃鏈祦涓紝鍛堢幇鏇翠负鐏垫椿鐨勫竷灞銆鍦–SS鐨濂囧涓栫晫閲岋紝span</鐨勭敤閫旇繙涓嶆浜庢枃瀛楃殑瑁呴グ銆備簨瀹炰笂锛屽畠鏄竴涓鍔熻兘鐨勫鍣紝鏃犺鏄浘鐗囥侀摼鎺ャ佽繕鏄悇绉...
绛旓細閫氳繃css锛歜ackground-image璇彞璁剧疆鑳屾櫙銆俠ackground-image 灞炴т細鍦ㄥ厓绱犵殑鑳屾櫙涓缃涓涓浘鍍忋傛牴鎹 background-repeat 灞炴х殑鍊硷紝鍥惧儚鍙互鏃犻檺骞抽摵銆佹部鐫鏌愪釜杞达紙x 杞存垨 y 杞达級骞抽摵锛屾垨鑰呮牴鏈笉骞抽摵銆傚垵濮嬭儗鏅浘鍍忥紙鍘熷浘鍍忥級鏍规嵁 background-position 灞炴х殑鍊兼斁缃傦紙1锛夌浉瀵圭殑鏂囦欢浣嶇疆锛氾紙2锛夋祴璇曚唬鐮...
绛旓細鐢变簬span鏄鍐呭厓绱狅紝鎵浠ュ鏋滄兂瑕佺粰瀹璁剧疆鍥哄畾鐨勫搴︼紝闇瑕佸厛灏嗗叾杞崲涓哄潡鐘跺厓绱狅紝涔嬪悗灏卞彲浠ヤ负鍏惰缃浐瀹氱殑瀹藉害浜嗭紝濡俿pan {display:block; width: xxx px; }銆傝璁颁綇锛屼换浣曠殑琛屽唴鍏冪礌锛岄兘鏄笉鑳藉鍏惰繘琛屽楂樿缃紝瀹冪殑楂樺害鍙殢鐫瀛椾綋澶у皬鍜岃楂樿屾敼鍙橈紝鑰屽畠鐨勫搴﹀彧闅忕潃鏂囨湰鍐呭鐨勫搴﹁屾敼鍙橈紝鎵浠...
绛旓細鍦span鐨凜SS涓澧炲姞display灞炴э紝灏span璁剧疆涓篵lock绫诲瀷鐨凟lement锛岃繖鏍峰搴︾殑纭湁鏁堜簡锛屼絾鎶婂墠鍚庢枃瀛楅殧鍦ㄤ笉鍚岃閲岄潰锛岃繖鏍峰叾瀹瀞pan灏卞畬鍏ㄥ彉鎴愪簡div銆傚埗浣滅綉绔欐椂鍙戠幇缁檚pan璁剧疆瀹藉害浼氭棤鏁堬紝閫氳繃鏌ラ槄CSS2鏍囧噯涓叧浜巜idth 鐨勫畾涔夊彂鐜帮紝鍘熸潵CSS涓殑 width 灞炴у苟涓嶆绘槸鏈夋晥鐨勶紝濡傛灉瀵硅薄鏄 inline 瀵硅薄锛寃idth 灞炴...
绛旓細7銆佹垜浠柊寤轰竴涓猚ss鏂囦欢锛屾妸txt鐨勬枃浠跺悗缂鍚嶆敼涓篶ss鍗冲彲锛屼箣鍚庢墦寮灏卞彲浠ュ啓鍏ss浠ｇ爜浜嗐8銆佹垜浠鐢鏍囩閫夋嫨鍣ㄤ负p>鏍囩銆乸>鏍囩鍜span>鏍囩鐨勫唴瀹璁剧疆鏍峰紡銆9銆佹垜浠娇鐢,link>鏍囩灏嗘垜浠紪鍐鐨刢ss鏂囦欢鏍峰紡琛ㄦ枃浠跺叾寮曞叆鍒版垜浠綋鍓嶇殑html鏂囦欢涓潵銆10銆佹垜浠紶鏍囧彸鍑诲湪寮瑰嚭鐨勪笅鎷夎彍鍗曚腑锛屾垜浠夋嫨鈥滃湪娴忚鍣...
绛旓細span鍏冪礌涓哄唴鑱斿厓绱狅紝涓嶅叿澶囧搴︾壒鎬э紝璁剧疆text-align灞炴т細娌℃湁鏁堟灉锛屽洜姝ら渶瑕佸皢span鍏冪礌鐨勫睍绀虹被鍨嬭浆鍖栦负鍏锋湁鍧楃骇鐗规с傛柟娉1锛璁剧疆span鐨display灞炴т负block銆<span style="font-size:14px;text-align:center;display:block;">...</span> 鏂规硶2锛氳缃畇pan鐨刣isplay灞炴т负inline-block锛岃繖绉嶆柟寮忛渶瑕佹墜鍔...
绛旓細鍙互绠鍖栫殑鐞嗚В涓鐢╯pan灏辨槸涓轰簡缁欎竴浜涘厓绱犱互鐗规畩鏍峰紡锛屾垨鑰呭綋绌烘爣绛炬寕鍥剧敤銆備妇渚嬫潵璇<p style=" color:#000;" >鎴戞槸榛戣壊鐨勫瓧<span style=" color:#f00" >鎴戞槸绾㈣壊鐨勫瓧</span>鎴戞槸榛戣壊鐨勫瓧</p> 鎴戜滑缁欎簡<p>鏍囩鍐呮枃鏈渃olor:#000鈥濈殑鏍峰紡锛屼篃灏辨槸璇翠护鏂囧瓧棰滆壊涓洪粦鑹诧紝鑰屾枃绔犱腑鏈夊嚑涓瓧...
