网页图标合并成一张大图的原因和方法

之前做网站时大家都是把背景切成单个小图片，要用背景的时候一个个调用，这样页面打开的时候，也会加载各个小图片

而现在只要浏览各大知名网站，基本上都采用另外一种做法，那就是把所有图标都集中在一张大图里面，然后用css控制显示那张图片，这样做的好处是：同时加载100张小图片，比加载1张大图片耗用的连接数多；在网页上做鼠标移动动作的时候，如果需要切换图标，如果正好网络不好，可能就会出现白色背景的情况，而用大图就不会；

大图如：

要使用某一个图片只需要在HTML中加入

<span id=”img”></span>

然后定位某个图标的CSS代码如：

#img {display:block;width:20px;height:20px;background:url("img/ltlogo.gif") no-repeat -40px 0;}

其中no-repeat后面的参数代表背影图片的左上角相对当前元素左上角的坐标。

右为X轴正半轴, 下为Y轴正半轴

当前元素左上角坐标为 0,0

默认图片的左上角正对当前元素的左上角

如果图片想向左移 10px;background:url(images/hh.gif) no-repeat -10px 0;}

如果图片想向上移 10px;background:url(images/hh.gif) no-repeat 0 -10px;}

如果图片想向右移 10px;background:url(images/hh.gif) no-repeat 10px 0;}

时间： 2024-10-16 18:55:04

网页图标合并成一张大图的原因和方法的相关文章

SAP SD 如何把几张delivery合并成一张发票invoice

在SAP中,发票是根据发货单delivery来创建的,那么,如何把多个的发货单delivery合并成一个发票invoice呢? 这个问题相对于发票分割就比较简单了.如果想要把几个delivery发货单合并成一张发票,那么基本上需要delivery发货单的header抬头的数据要一致,而delivery发货单上面的伙伴partner要一致就可以了,具体的来说,你要注意以下的field的值要一致. 1. Payer付款方 2. Payment Terms付款条件 3. Billing Date发票日

sqlserver 把两个sql查询语句查询出来的两张表合并成一张表

第一个sql语句 select companyname gsmc,zb zhibiao from t_gsndzb left join t_companycode on t_gsndzb.gsbh=t_companycode.companyid 查询结果: 第二个sql语句 SELECT min(companyname) gsmc,cast(round(sum(t_xstj.hsje)/10000,2) as numeric(20,2)) ndje FROM t_xstj left join t

python将两个数组合并成一个数组的两种方法的代码

内容过程中,把写内容过程中常用的内容收藏起来,下面的资料是关于python将两个数组合并成一个数组的两种方法的内容,希望能对小伙伴们有帮助. c1 = ["Red","Green","Blue"]c2 = ["Orange","Yellow","Indigo"]c1.extend(c2) assert c1 == ["Red","Green",&q

将多张图片合并成一张，代码（可垂直和水平方向合并）

import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * @author oucq * @version Aug 3, 2016 6:13:55 PM * * 该类实现了图片的合并功能,可以选择水平合并或者垂直合并. */ public class ImageUtil { /** * @param fileUrl

使用SQL语句将数据库中的两个表合并成一张表

select * into 新表名 from (select * from T1 union all select * from T2)  这个语句可以实现将合并的数据追加到一个新表中. 不合并重复数据 select * from T1 union all select * from T2  合并重复数据 select * from T1 union select * from T2      两个表,表1 表2 如果要将 表1的数据并入表2用以下语句即可 insert into 表2(字段1,

PHP将多张小图拼接成一张大图

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <?php $imgs = array(); $imgs[0] = 'imgs/1.jpg'; $imgs[1] = 'imgs/2.jpg'; $imgs[2] = 'imgs/3.jpg'; $imgs[3] = 'imgs/4.jpg'; $imgs[4] = 'imgs/5.jpg'; $imgs[5]

mysql多张表合并一张表进行查找

今天有个需求是 mysql多张表合并一张表查询出该表有多少个userid(去重). 首先我的思路是,把多张表采用union合并成一张表,然后进行group by, 最后进行sum(userid), 得出数量. select COUNT(DISTINCT(`user_id`)) FROM ( select user_id from log_20160706 union select user_id from log_20160707 union SELECT user_id from log_20

mysql多表合并为一张表

有人提出要将4张表合并成一张.数据量比较大,有4千万条数据.有很多重复数据,需要对某一列进行去重. 思路: 1.导出数据.select into outfile. 2.传输到要导入数据的服务器上. 3.创建一张新表,主键和约束等与那三张表一样. 4.LOAD DATA INFILE导入.利用replace参数进行覆盖达到去重的目的. LOAD DATA INFILE '/backup/tbl_get.csv' replace INTO TABLE emob.tbl_new; LOAD DATA

Visio如何合并多张工作表（将多个文件合并成一个文件）

  Visio如何合并多张工作表(将多个文件合并成一个文件) 今天有个盆友问了我这样一个问题:手上有3张Visio文件,分别是3张流程图.他想将3个文件做成像excel表那样,有工作表1,工作表2,工作表3的样式.图片效果如下: 将上述3个流程图文件,合并到一个文件里去,如下图: 实现方法如下: 1. 新建一个工作表 2. 插入→对象→根据对象创建→浏览文件位置→插入 3. 设计→大小→适应绘图 OK,如此循环大功告成