㈠ 怎樣用HTML前台代碼向按鈕中插入背景圖片，怎樣設置按鈕里的字體
呵呵，您好。
從您提出的問題就可以看出，您對網頁設涉入還不太深，也不了解CSS的相關知識，
所以我以下回答的是不用CSS的方法。
對於「推薦答案」告訴您的是CSS的方法，雖然答案對，但是沒有考慮到您的知識面。
（
就好象有人問：每個蘋果要5毛錢，那麼兩個蘋果的價格用「加法」怎麼算。
而有人回答說：2*5＝10 雖然10的答案是對的。但是如果不明白乘法。那麼，提問者仍然沒有得到「加法怎麼算」的答案。
）
我覺得我的回答更貼近您想要的答案（完全是HTML基礎代碼），而且不只是告訴您答案，還一步步引導您理解這些代碼。
首先呢，我希望你能對HTML有一定的基礎。下面的內容你才能理解
對於你的提問，從字面上理解，我理解為二個提問：
1、<input name="home" type="button">
這是HTML中定義一個名字叫home的按鈕的基本代碼。注意：此時按鈕上面還沒有文字，也沒有背景圖片。
2、<input name="home" type="button" value="首頁" >
對1中的代碼進行修改添加了 「 value="首頁" 」 這樣就為按鈕添加了「首頁」兩個字了
3、<input name="home" type="button" value="首頁" style="font-size:18px" />
斷續對2的代碼進行修改 style="font-size:18px" 是對按鈕中的文字大小進行設置。
你再試一試 style="font-size:20px" 會發現字體變的更大一些了，所以值越大，字體大小越大。 同時注意按鈕的大小也會隨著字體的大小而自動變大變小。
4、<input name="home" type="button" value="首頁" style="font-size:18px;font-family:宋體" />
斷續對3的代碼進行修改 在剛才的 style="font-size:18px" 中加入 font-family:宋體
注意「font-size:18px」與「font-family:宋體」中間用分號隔開。 加入的代碼的意思是設置字體為宋體
那設置為黑體呢？當然是用 font-family:黑體 羅。
好了。你的第一問題「怎樣用HTML前台代碼向按鈕中插入背景圖片，怎樣設置按鈕里的字體？
」我問答完了。
5、<input name="home" type="button" value="首頁" style="font-size:18px;font-family:宋體;width:80px; height:80px" />
對4的代碼進行修改添加「width:80px; height:80px」是設置按鈕的大小。
width:80px 是設置按鈕的寬度
height:80px是設置按鈕的高度
注意「font-size:18px」與「font-family:宋體」與「width:80px」與「height:80px」這四句話之間都有分號
6、<input name="home" type="button" value="首頁" style="font-size:18px;font-family:宋體;width:80px; height:80px";background:url(http://i0.sinaimg.cn/IT/deco/2010/0916/mobile_index/images/sj_wzc01.jpg)"
對5的代碼進行修改添加「background:url(http://i0.sinaimg.cn/IT/deco/2010/0916/mobile_index/images/sj_wzc01.jpg)」，即為按鈕添加背景圖片。在這里背景圖片的地址是引用了「http://i0.sinaimg.cn/IT/deco/2010/0916/mobile_index/images/sj_wzc01.jpg」這個導航條的背景（這是你提問中http://tech.sina.com.cn/mobile/網址中導航條的背景地址）。很顯然，背景條的大小遠大於按鈕的大小。所以做為此按鈕的背景不太適合。
好了，你的第二個問題也回答完了。
對於你的問題補充，我附上你說想要的其導航條代碼。
<div class="P1">
<span class="list"><a target="_self" href="http://digi.sina.com.cn/">數碼首頁</a></span>
<span class="list" style="width:90px;"><a target="_blank" href="http://club.tech.sina.com.cn/">數碼社區</a></span>
<span class="selectd" style="width:72px;"><a target="_self" href="http://tech.sina.com.cn/mobile/">手機</a></span>
<span class="list" style="width:107px;"><a target="_self" href="http://tech.sina.com.cn/digi/">數碼相機</a></span>
<span class="list" style="width:74px;"><a target="_self" href="http://tech.sina.com.cn/hardware/">硬體</a></span>
<span class="list" style="width:88px;"><a target="_self" href="http://tech.sina.com.cn/notebook">筆記本</a></span>
<span class="list" style="width:85px;"><a target="_self" href="http://tech.sina.com.cn/pc/">台式機</a></span>
<span class="list" style="width:100px;"><a target="_self" href="http://tech.sina.com.cn/digi/mp3/">MP3</a>/<a target="_self" href="http://tech.sina.com.cn/digi/mp4/">MP4</a></span>
<span class="list" style="width:72px;"><a target="_self" href="http://tech.sina.com.cn/elec/">家電</a></span>
<span class="list" style="width:72px;"><a target="_self" href="http://tech.sina.com.cn/down/">下載</a></span>
<span class="list" style="width:92px;"><a target="_self" href="http://tech.sina.com.cn/price/">產品報價</a></span>
</div>
經過分析知道其上對字體的設置是來源於頁面中的「P1」樣式。P1樣式代碼如下：
.TechNav .P1{height:31px;float:left;}
.TechNav .P1 .list{float:left;width:92px; padding-top:7px;text-align:center; font-size:14px;color:#fff;filter:Dropshadow(offx=-1,offy=-1,color=#0e5499) ;text-shadow:#0e5499 -1px -1px 0;}
.TechNav .P1 .list a:link,.TechNav .P1 .list a:visited{color:#fff;text-decoration:none;font-family:"微軟雅黑","宋體";}
.TechNav .P1 .list a:hover{color:#fff;text-decoration:underline;}
.TechNav .P1 .selectd{width:78px;text-align:center;color:#fff;padding:10px 0 5px 0;line-height:16px;font-size:18px;float:left;filter:Dropshadow(offx=-1,offy=-1,color=#0e5499) ;text-shadow:#0e5499 -1px -1px 0;}
.TechNav .P1 .selectd a:link,.TechNav .P1 .selectd a:visited{color:#fff4c9;text-decoration:none;font-family:"微軟雅黑","宋體";}
.TechNav .P1 .selectd a:hover{color:#fff4c9;text-decoration:none; }
.TechNav .P1 .line{width:2px;height:31px;background:url(http://i2.sinaimg.cn/IT/mobliesy/images/modi_mj_006.gif) no-repeat 0 0;overflow:hidden;float:left;}
而其中包含了幾種字體，分別在文字鏈接的不同狀態下顯示不同的字體設置。
請您自行研究。如有不明白請再補充問題。
當然了對於字體的設置還有一些其它內容，比如設置為粗體等，我不一一說明。而對於背景圖片中的地址除了可以引用來由於網路上的網址外，還可以引用自己網頁上的圖片，但是這其中你應當明白「相對路徑」和「絕對路徑」的概念。
另外，現在大多數比較好的網站，特別是門戶網站都是用的動態的網頁技術來的。都用到了框架、CSS等美化方法。要想理解和研究它們的設計，這些知識是應當知道的。
如有不明白請多網路或者谷歌一下「HTML設置字體」及「HTML背景圖片」的相關內容，或者留言與我，我再告知
㈡ 在Css中如何設置span的背景顏色和背景圖片
給span增加一個class，例如：
文字
然後css里寫上：
.title { background: #000 url("背景圖片地址"); }
㈢ span的background為一張圖片，直接寫在css文件中可以顯示，但是用jquery.css 方法出不來！（急~~）
剛才測試了下, 確實jquery沒法直接處理 background 組合屬性, 你可以這樣處理:
將 no-repeat scroll...等處理到一個 樣式中, 譬如 abc
<span class='abc' ....>
然後修改背景圖片:
$("...).css("background-image", "url('...')");
這個方法是可行的.
㈣ span 的背景圖片怎麼加不進去呢
你就設置了寬度，沒有設置高度，對於一個沒有長寬的span，你當然看不到你設置的背景圖片啦
㈤ 在Css中如何設置span的背景顏色和背景圖片
背景顏色 background-color:#顏色代碼; 例如：background-color:#ff0000;
背景圖片 background-image:url(圖片路徑名字); 例如：background-image:url(/images/123.gif);
㈥ CSS如何添加背景圖片
通過css：background-image語句設置背景。
background-image 屬性會在元素的背景中設置一個圖像。根據background-repeat屬性的值，圖像可以無限平鋪、沿著某個軸（x 軸或 y 軸）平鋪，或者根本不平鋪。初始背景圖像（原圖像）根據background-position屬性的值放置。
（1）相對的文件位置：
(6)span按鈕添加背景圖片擴展閱讀：
background-image 屬性為元素元素的背景占據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。
默認地，背景圖像位於元素的左上角，並在水平和垂直方向上重復。
提示：請設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。
㈦ 在Css中如何設置span的背景顏色和背景圖片
給span增加一個class，例如：
<span class="title">文字</span>
然後css里寫上：
.title { background: #000 url("背景圖片地址"); }
㈧ 有一個button，我給它設置了一張背景圖片，button有value值，用CSS怎麼調整使value值位於圖片下方
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<styletype="text/css">
button{
background-image:url("seo.jpg");
background-repeat:no-repeat;
}
#text{
position:absolute;
top:30px;
}
</style>
</head>
<body>
<buttonstyle="width:100px;height:100px;"><spanid="text">拍照</span></button>
</body>
</html>
seo.jpg是你的背景圖片，當然圖片的尺寸要合適，然後就是button的value值，當然了，我是這樣寫的，<button style="width: 100px;height: 100px;"><span id="text">拍照</span></button>，這樣將要顯示在button上的值這樣寫在標簽外，給他加個<span>元素，就可以用CSS控制它的位置了，不知道，我這樣理解，符合你的要求不？
不懂，繼續問我。
希望能夠幫助到你，望採納！
㈨ CSS添加背景圖片
span是行內元素（inline）,你需要將span轉化為塊級元素才可以准確設置邊框和背景，當然inline-block也是可以的，記得為ie設置兼容哦
㈩ span css代碼能顯示背景圖片嗎
你要了解什麼是塊元素，什麼是內聯元素，就知道span能不能顯示背景了:
block（塊）元素的特點：
①總是在新行上開始；
②高度，行高以及外邊距和內邊距都可控制；
③寬度預設是它的容器的100%，除非設定一個寬度。
④它可以容納內聯元素和其他塊元素
inline元素的特點：
①和其他元素都在一行上；
②高，行高及外邊距和內邊距不可改變；
③寬度就是它的文字或圖片的寬度，不可改變
④內聯元素只能容納文本或者其他內聯元素
（中文叫法有多種內聯元素、內嵌元素、行內元素、直進式元素）。
塊元素(block element)和內聯元素(inline element)都是html規范中的概念。塊元素和
內聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以後，塊元
素和內聯元素的這種屬性差異就不成為差異了。比如，我們完全可以把內聯元素
加上display:block這樣的屬性，讓他也有每次都從新行開始的屬性即成為塊元素
,同樣我們可以把塊元素加上display:inline這樣的屬性，讓他也在一行上排列
塊元素(block element)
◎ address - 地址
◎ blockquote - 塊引用
◎ center - 舉中對齊塊
◎ dir - 目錄列表
◎ div - 常用塊級容易，也是css layout的主要標簽
◎ dl - 定義列表
◎ fieldset - form控制組
◎ form - 交互表單
◎ h1 - 大標題
◎ h2 - 副標題
◎ h3 - 3級標題
◎ h4 - 4級標題
◎ h5 - 5級標題
◎ h6 - 6級標題
◎ hr - 水平分隔線
◎ isindex - input prompt
◎ menu - 菜單列表
◎ noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容）
◎ noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容）
◎ ol - 排序表單
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表（無序列表）
內聯元素(inline element)
◎ a - 錨點
◎ abbr - 縮寫
◎ acronym - 首字
◎ b - 粗體(不推薦)
◎ bdo - bidi override
◎ big - 大字體
◎ br - 換行
◎ cite - 引用
◎ code - 計算機代碼(在引用源碼的時候需要)
◎ dfn - 定義欄位
◎ em - 強調
◎ font - 字體設定(不推薦)
◎ i - 斜體
◎ img - 圖片
◎ input - 輸入框
◎ kbd - 定義鍵盤文本
◎ label - 表格標簽
◎ q - 短引用
◎ s - 中劃線(不推薦)
◎ samp - 定義範例計算機代碼
◎ select - 項目選擇
◎ small - 小字體文本
◎ span - 常用內聯容器，定義文本內區塊
◎ strike - 中劃線
◎ strong - 粗體強調
◎ sub - 下標
◎ sup - 上標
◎ textarea - 多行文本輸入框
◎ tt - 電傳文本
◎ u - 下劃線
◎ var - 定義變數