字体背景 - 走看看

zoukankan html css js c++ java

字体背景
为字体设置背景：

为每一个字设置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/cnblogs_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{ 600px;} #msg span{display: inline-block;font-size: 12px; 24px; height: 24px; line-height: 29px; text-align: center;background: url(apple.jpg) no-repeat; overflow: hidden;} </style> </head> <body> <textarea id="txt" style="600px; height: 80px;"></textarea> <input id="btn" type="button" value="确定" /> <div id="msg"></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>
查看全文

相关阅读:
Linux下SSH的Log文件路径
 Linux下压缩与解压命令tar
Linux命令之at
Linux下nice/renice命令小结
 Linux命令详解nice
LVM---动态调整磁盘容量
 VT100字体
 Linux命令之WC
for name in loop Shell
Bind9用view配主从

原文地址：https://www.cnblogs.com/kuikui/p/2798879.html

Copyright © 2011-2022 走看看