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

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

而现在只要浏览各大知名网站,基本上都采用另外一种做法,那就是把所有图标都集中在一张大图里面,然后用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;}

时间: 02-13

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

将多张图片合并成一张,代码(可垂直和水平方向合并)

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

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]

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

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

将多个jpg文件以追加形式合并成一个文件_delphi教程 bmp 合并 http://www.west.cn/www/info/58058-1.htm

将多个jpg文件以追加形式合并成一个文件_delphi教程 作者:网友供稿 点击:0 西部数码-全国虚拟主机10强!20余项虚拟主机管理功能,全国领先!第6代双线路虚拟主机,南北访问畅通无阻!云服务器可在线rar解压,自动数据恢复设置虚拟目录等.虚拟主机免费赠送访问统计,企业邮局.Cn域名注册10元/年,自助建站480元起,免费试用7天,满意再付款!P4主机租用799元/月.月付免压金! 文章页数:[1]    DFW里有朋友问: 有多个jpg文件,如:1.jpg2.jpg3.jpg......

SQL 列转行,即多行合并成一条

需求:按照分组,将多条记录内容合并成一条,效果如下: 数据库示例: CREATE TABLE [t2]([NID] [bigint] NULL,[district] [nvarchar](255) NULL,[town] [nvarchar](255) NULL); insert into t2 values(1,'淮上区','曹老集镇'); insert into t2 values(2,'淮上区','淮滨街道'); insert into t2 values(3,'淮上区','梅桥乡');

MySQL合并列,集合中某个字段合并成一条

默认查询: SELECT floor,place_code FROM ticket; 合并列: SELECT concat(floor,',',place_code) floor FROM ticket; 合并成一条: SELECT group_concat(floor) floor FROM ticket;

如何将多个查询结果拼成一张表

有以下几个查询结果,想要拼成一张表 1.SELECT NAME,COUNT(1) AS Num1 FROM 表1 GROUP BY NAME; 2.SELECT NAME,COUNT(1) AS Num2 FROM 表1 WHERE EXC= 0 GROUP BY NAME; 注:EXC数据类型为bit 3.SELECT NAME,COUNT(1)AS Num3 FROM 表2 GROUP BY NAME; 4.SELECT NAME,COUNT(1)AS Num4 FROM 表2 WHERE

丝丝缕缕的相思,已编织成一张密密的网

丝丝缕缕的相思,已编织成一张密密的网,网住了我的脚步,放飞了我的思念. 低头闭目我想你心里的水便泛滥成眼里的泪,满脸都是念你的忧伤, 虽从不能伸手握住你,但是却时刻感觉到,周围都是你的气息,那无声的温柔,悄然从对岸飞来,轻轻温暖着. 我那在等待中,渐渐迷茫的情怀, 于是不再问你在哪里, 因为你就住在我的心底, 也不问我们之间有多远的距离.因为在仰首俯首间都已经看到你,于是不再问前尘后世,我只珍惜这一刻,心动的美丽. http://www.linkedin.com/grp/post/6967779

将二级目录下的文件合并成一个文件的Python小脚本

这个小程序的目的是将二级目录下的文件全部合并成一个文件(其实几级目录都可以,只要做少许改动) 1 #coding:utf8 2 import sys, os 3 4 def process(path): 5 new_file = open("file_1", "a+") 6 for secDir in os.listdir(path): 7 for f in os.listdir(path + "/" + secDir): 8 fin = ope

go语言:多个[]byte数组合并成一个[]byte

场景:在开发中,要将多个[]byte数组合并成一个[]byte,初步实现思路如下: 1.获取多个[]byte长度 2.构造一个二维码数组 3.循环将[]byte拷贝到二维数组中 package gstore import ( "bytes" ) //BytesCombine 多个[]byte数组合并成一个[]byte func BytesCombine(pBytes ...[]byte) []byte { len := len(pBytes) s := make([][]byte, l