字体背景 - 走看看

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>
查看全文

相关阅读:
liunx 解压与压缩
 缓存设计与优化
 易混乱javascript知识点简要记录
 初识RedisCluster集群
 Redis Sentinel(哨兵模式)
JavaScript作用域简单记录
 JavaScript引用类型简单记录
 redis主从复制初识
 javascript基础知识点
 持久化的一些问题

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

Copyright © 2011-2022 走看看