㈠ 怎样用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 - 定义变量