字体背景 - 爱码网

为字体设置背景：

为每一个字设置span标签，使span变成成为inline-block元素，并设置背景。

span{
display: inline-block;
     width: 24px;
 height: 24px;
 line-height: 29px;
 text-align: center;
     font-size：12px;
     background: url(http://images.cnblogs.com/likecs_com/kuikui/354173/t_apple.jpg) no-repeat; 
     overflow: hidden;
}

示例：

<!DOCTYPE html> <html> <head> <title>字体</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../jquery-1.8.1.min.js" ></script> <style> *{margin: 0px; padding: 0px;} #msg{width: 600px;} #msg span{display: inline-block;font-size: 12px;width: 24px; height: 24px; line-height: 29px; text-align: center;background: url(apple.jpg) no-repeat; overflow: hidden;} </style> </head> <body> <textarea ></textarea> <input /> <div ></div> <script> $("#btn").click(function(){ var val = $("#txt").val(); var arr = val.split(""); var html = ""; for(var i=0,j=arr.length;i<j;i++){ html+="<span>"+arr[i]+"</span>"; } $("#msg").html(html); }); </script> </body> </html>