关闭

显示背景图片的一部分

299人阅读 评论(0) 收藏 举报

如果在页面山有很多小图标,可以把它们集中到一张图片当中。

实现原理:根据CSS样式,选择背景图片坐标位子,就能准确定位出显示的图片
优点:避免了维护多个文件,只需要管理一个图片文件
   显示的效果全部由CSS控制
缺点:一次需要下载相对较大的图片,浪费流量,加大了代码的难度

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.test{
	width: 24px; 
	height: 22px; 
	display: inline-block;
	background: url(img/ico.png?v=20120214) -10px -107px no-repeat; 
	vertical-align: middle; 
}
</style>
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">

	
</script>
<title>无标题文档</title>
</head>
	<div>background:url() -10px -107px no-repeat; 
		<p>-10px表示距离图片左顶点的宽度
		<p>-107px表示距离图片左顶点的高度
		<p>width: 24px; 目的是为了设置显示div的宽度
		<p>height:22px; 目的是为了设置显示div的高度
	</div>
	<div class="test"></div>
<body>
</body>
</html>

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:309876次
    • 积分:8710
    • 等级:
    • 排名:第2262名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:5条
    最新评论