显示背景图片的一部分

原创 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>

 

CSS网页制作技巧:背景图片定位 显示切图的一部分作为背景显示

一、 网页中添加图片的方式有两种 一种是:通过标签直接插入到html中 另一种是:通过css背景属性添加 二、 怎样来判断添加图片方式?? Ø 网页中的装饰性的图片,通过背景图片添加 Ø 用户图...
  • dalancon
  • dalancon
  • 2013年10月30日 11:02
  • 17935

CSS设置了正确的背景图片位置,网页上却显示不出来?

关于CSS中设置背景图片但在网页上未显示做如下笔记,和大家分享.. 如有说的不对或不恰当的地方,希望读者指出,共同进步。 今天在写一个小项目的时候在一个点上疑惑了许久,明明我的背景图片路径设置的不...
  • m0_38099607
  • m0_38099607
  • 2017年04月06日 13:30
  • 2618

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

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

android中如何显示图片的一部分

在android应用程序中加载一张图片,然后把它显示出来这是一件非常容易的事情,那怎么才能显示一张图片的一小部分呢,一种做法是把图片ps一下,要显示的那部分单独存成一张图片,然后程序中加载它,并把它显...
  • goodding
  • goodding
  • 2013年02月01日 17:35
  • 4897

ListView获取只显示在屏幕的部分数据与全部数据

List添加了OnItemClickListener监听,可以在监听里面的AdapterView parent  参数可以获取条目的View,但是这值得注意的是在整个ListView都在屏幕能显示全则...
  • gaosililin
  • gaosililin
  • 2016年02月16日 11:42
  • 1339

android中如何显示图片的一部分

  在android应用程序中加载一张图片,然后把它显示出来这是一件非常容易的事情,那怎么才能显示一张图片的一小部分呢,一种做法是把图片ps一下,要显示的那部分单独存成一张图片,然后程序中加载它...
  • lsong89
  • lsong89
  • 2014年06月26日 17:03
  • 403

web显示一部分内容

- (void)webViewDidFinishLoad:(UIWebView *)webview{ 02.  03.NSString *js = @"var element = document...
  • xuchaovip
  • xuchaovip
  • 2014年07月04日 14:13
  • 270

android中如何显示图片的一部分

在android应用程序中加载一张图片,然后把它显示出来这是一件非常容易的事情,那怎么才能显示一张图片的一小部分呢,一种做法是把图片ps一下,要显示的那部分单独存成一张图片,然后程序中加载它,并把它显...
  • J772863893
  • J772863893
  • 2013年08月01日 00:07
  • 452

完美的css背景图片全屏显示,能比例缩小,不留空白

简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念。但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任...
  • killcwd
  • killcwd
  • 2015年12月12日 09:09
  • 3697

将图片作为窗体背景,但是显示不出的问题解决。java。

今天突然想美化一下窗体,却出现了一个问题,图片没法显示。调整图片的大小什么的无法解决。后来想了一想是不是图片格式的问题。试了一下就出现了。 代码如下:  首先将图片...
  • Pabebe
  • Pabebe
  • 2016年11月13日 22:42
  • 1890
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:显示背景图片的一部分
举报原因:
原因补充:

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