显示背景图片的一部分

最新推荐文章于 2021-02-15 14:32:18 发布

胖鹅68

最新推荐文章于 2021-02-15 14:32:18 发布

阅读量644

点赞数

本文链接：https://blog.csdn.net/hbiao68/article/details/17112827

版权

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

实现原理：根据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>

显示背景图片的一部分.zip (3.8 KB)
下载次数: 12