显示背景图片的一部分

原创 2013年12月04日 09:52:22

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

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

 

相关文章推荐

显示背景图片模糊

  • 2015年01月28日 17:42
  • 3.14MB
  • 下载

Qt利用setstylesheet给控件设置背景图片不能显示

有个问题一直困扰我好久,就是用setstylesheet给控件设置背景图片的时候,找来找去运行程序的时候设置的背景图片就是不显示。 现在总结一下自己发现的一些问题,以及使用setstyle...
  • skkw111
  • skkw111
  • 2017年03月23日 19:28
  • 803

Android启动过程中背景图片显示

大部分Android App启动过程中,都会设置一个背景图片,直到App加载成功,图片消失。因此,这也是做Android App的基本技能之一。这个过程实现起来并不难。 总共需要以下内容:2个Act...

DataGrid透明显示背景图片,及表头透明

今天有人问我flex中怎样向DataGrid添加背景图片,以及怎样使表格透明。    其实这个查下文档就知道,可以如下用setStyle设置: dataGrid.setStyle('bac...

Android根据Button状态(normal,focused,pressed)显示不同背景图片

Android中Button 有focused, selected, pressed 等不同状态,通过配置一个XML格式的 drawable “selector” 即可实现”在不同状态下显示不...
  • xinke87
  • xinke87
  • 2011年01月10日 18:17
  • 1023

完整显示背景图片

背景图过大,完整显示背景图方法,兼容IE,转。。。。 Perfect Full Page Background Image PUBLISHED NOVEMBER 20, 2...

adnroid selector 组件的状态显示该状态对应的背景图片

selector相当于图片选择器,在res下新建个drawable文件夹,把组件的背景设成对应你建的xml文件名下面是我做的一个简单的例子项目结构图见附件 btn.xml代码:Xml代码 xml v...

ASP.NET中背景图片不能正常显示问题.

以下内容纯粹是个人总结的.不排除还有其它异常发生的可能性. 本人遇到的背景图片不能正常显示的问题有两种: 第一种是路径问题. 第二种是浏览器兼容问题. 第一种路径问题发生的原因,是不了...

多个图标集于一张背景图片在网页上显示指定区域

早就发现了。。很多大一点的门户里面用的一些背景图都是一个页面只有一张背景图。。所有要用的图标全都放到一张图里面。开始想应该是用位置来控制的,但自己在做网页的时候位置太难调了一直没去实现。。今天在网上找...
  • zxcdhm
  • zxcdhm
  • 2013年04月24日 21:50
  • 1520
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:显示背景图片的一部分
举报原因:
原因补充:

(最多只允许输入30个字)