把图片设置为背景图片，然后加上文字就可以了
成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计制作、网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的伊州网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
style
.img1{
width:200px;
height:200px;
background-image:url("img/1.jpg");
}
/style
div class="img1"图片加文字/div
整体结构
【页面头部】
1、文件应以“!DOCTYPE ......”首行顶格开始，推荐使用“!DOCTYPE html”
!DOCTYPE html
2、必须声明文档的编码charset，且与文件本身编码保持一致，指定字符编码的 meta 必须是 head 的第一个直接子元素。推荐使用UTF-8编码meta charset="utf-8"
（1）网页显示字符集
（2）可选标签
公司的版权注释
网页制作者信息
网站简介
设定网页的到期时间，一旦网页过期，必须到服务器上重新调阅
禁止浏览器从本地机缓存中调阅内容
用来防止别人在框架中调用你的页面
自动跳转
网页搜索机器人向导，用来告诉机器人哪些页面需要搜索，哪些页 面不需要搜索
收藏夹图标
3、根据页面内容和需求填写适当的keywords和description
4、页面title是不可缺少的一项，title 必须作为 head 的直接子元素，并紧随 charset 声明之后
Html是英文HyperTextMarkupLanguage的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或FrontPageEditor等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用标志名/标志名来表示标志的开始和结束(例如html/html标志对)，因此在Html文档中这样的标志对都必须是成对使用的。
Html的基本标志： 1.html/html html标志用于Html文档的最前边，用来标识Html文档的开始。而/html标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。 2.head/head head和/head构成Html文档的开头部分，在此标志对之间可以使用title/title、script/script等等标志对，这些标志对都是描述Html文档相关信息的标志对，head/head标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。 3.body/body body/body是Html文档的主体部分，在此标志对之间可包含p、/p、h1、/h1、br、hr等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。body标志中还可以有以下属性：属性 用途 示例 bodybgcolor="#rrggbb"设置背景颜色。bodybgcolor="red"红色背景 bodytext="#rrggbb"设置文本颜色。bodytext="#0000ff"蓝色文本 bodylink="#rrggbb"设置链接颜色。bodylink="blue"链接为蓝色 bodyvlink="#rrggbb"设置已使用的链接的颜色。bodyvlink="#ff0000" bodyalink="#rrggbb"设置正在被击中的链接的颜色。bodyalink="yellow" 说明:以上各个属性可以结合使用，如bodybgcolor="red"text="#0000ff"。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如bodytext="Blue"表示body/body标志对中的文本使用蓝色显示在浏览器的框内。 4.title/title 使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在title/title标志对之间加入您要显示的文本即可。注意：title/title标志对只能放在head/head标志对之间。
context.fillStyle = "#000000";//颜色
context.font = "normal 20px 微软雅黑";//字体
context.textBaseline = "middle";//竖直对齐
context.textAlign = "center";//水平对齐
context.fillText("文字", x坐标, y坐标, 文字宽度);//绘制文字
以上是canvas绘制文字常用的.
你可以使用html5的画布canvas实现，先在画布上画上你的图片，然后在上面画上字就可以了。缺陷是有的浏览器不支持HTML5（比如IE），所以这个方案是有局限性的。
希望帮助到你。
我之前好像回答过了啊，
用html5 canvas
img.src指定图片地址
script src="vote/js/jquery-1.7.2.min.js" language="javascript"/script
style type="text/css"
#canvas{ border:1px solid #ccc;}
/style
div id="canvasDiv"/div
script language="javascript"
var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
var canvasWidth = 600, canvasHeight=400;
var img=new Image()
img.src="";
img.onload = function () //确保图片已经加载完毕
{
canvas.getContext('2d').drawImage(img,0,0);
}
var point = {};
point.notFirst = false;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
var context = canvas.getContext("2d");
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
//canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
while (clickX.length 0 ) {
point.bx = point.x;
point.by = point.y;
point.x = clickX.pop();
point.y = clickY.pop();
point.drag = clickDrag.pop();
context.beginPath();
if (point.drag point.notFirst) {
context.moveTo(point.bx, point.by);
} else {
point.notFirst = true;
context.moveTo(point.x - 1, point.y);
}
context.lineTo(point.x, point.y);
context.closePath();
context.stroke();
}
/*
for(var i=0; i clickX.length; i++)
{
context.beginPath();
if(clickDrag[i] i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
*/
}
/script
