Css - 精灵图
Css - 精灵图css sprite
一个页面文档上总是会有N多的图标小图片，它们都是以背景图的方式嵌入文档，每个小图片需要一个url的css属性，每个url都指向一个服务器地址的链接，每个链接都代表要向服务器发起一次请求，这就给文档加载带来了一定的延迟，所谓精灵图是指将需要的多张小图片做成一张大图，只需要利用css的background-position对图片进行合理的背景设置即可减轻服务端压力，同时还缩短了文档载入的时间。
* {
margin: 10px auto;
}
div {
background: url(Img/index.png) no-repeat;
}
#icon1 {
width: 27px;
height: 24px;
background-position:0 -185px;
}
#icon2 {
width: 58px;
height: 59px;
background-position: -183px 0;
}
#icon3 {
width: 26px;
height: 27px;
background-position: -157px -105px;
}
<body>
<div id="icon1"></div>
<div id="icon2"></div>
<div id="icon3"></div>
</body>
确定需要的图片的偏移量是通过在ps中使用切片工具将小图切好，再右击切片图-编辑切片找到小图的x和y轴的偏移量
Css - 精灵图的更多相关文章
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- 第9天：CSS精灵图
今天重点学习了CSS精灵图. "CSS精灵",英语css sprite,所以也叫做"CSS雪碧"技术.是一种CSS图像合并技术,该方法是将小图标和背景图像合并到 ...
- css雪碧图-css精灵图
先将图片拼接在一张图上.类似实现的效果图 图片地址为合并后的图片地址,通过background-position调整背景图的位置.效果如: HTML: <div class="logo ...
- CSS背景和精灵图
如何设置背景图片? 1.在CSS中有个叫做background-image:url():的属性,就是专门用于设置背景图片的. 2.注意点: 1)图片的地址必须放在url()中,图片的地址可以是本地的地 ...
- H5 40-CSS精灵图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML连载35-背景图片的练习、精灵图
一.背景图片练习 解释:这个例子需要注意的是,我们背景图片嵌套到另一个图片之中.我们设计的注意点在于,怎么定位到我们想定位到的地方. 总结:背景图片就是一块一块的,我们想把块的位置定位好(一般就是宽和 ...
- CSS Spritec下载,精灵图，雪碧图，初探之原理、使用
CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...
- CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）
一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...
- Uint 7.文本和字体属性,background,精灵图和3种定位
一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...
随机推荐
- ajax多表单序列化
今天在修一个后台接收参数为空值的bug 找了好久才发现原来是form表单合拼参数的时候把参数给搞没了 (我也不知道为什么啊—_—!) //对表单进行Json对象序列化 (function($){ $. ...
- bzoj1009 KMP+矩阵dp
https://www.lydsy.com/JudgeOnline/problem.php?id=1009 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(<=Xi<=), ...
- network / switchboard / jiaohuanji
s 步骤1:模拟交换机电源故障,验证设备运行正常 步骤2:模拟交换机主控故障,验证设备运行正常 步骤3:模拟交换机业务单板故障,验证业务运行正常 -- 需要验证业务 步骤4:模拟交换机堆叠分裂 -- ...
- OS + Linux RedHat 6.3 QA
s 问题1:could not open session 解决办法 https://blog.csdn.net/qq_40809549/article/details/82658720 解决1: 配置 ...
- 【.NET】using 语句中使用的类型必须可隐式转换为"System.IDisposable"
#问题: 在使用EF开发中,出现如下错误:“using 语句中使用的类型必须可隐式转换为“System.IDisposable” #原因: 项目中没有引用 EntityFramework 这个程序集: ...
- Spring Boot笔记二：快速创建以及yml文件自动注入
上个笔记写了如何自己去创建Spring boot,以及如何去打jar包,其实,还是有些麻烦的,我们还自己新建了几个文件夹不是. Idea可以让我们快速的去创建Spring boot应用,来看 一.快速 ...
- Windows Azure中国版试用
Winodws Azure刚出来那会都没怎么关注,就在一些网页新闻上见过一些报道,之前阿里云在博客里搞过推广,拿什么豆可以换,当时也就是看了一下没去用过. 有次在一群里别人说Windows Azure ...
- nginx做rails项目web服务器缓存配置方法
nginx作为Web服务器.或反向代理服务器都可以使用缓存 一.作为Web服务器 nginx可以通过 expires 指令来设置响应头的过期时间,实现浏览器缓存(Browser Caching),即浏 ...
- 【leetcode-100】 简单 树相关题目
100. 相同的树 (1过,熟练) 给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入: 1 1 / \ / \ 2 ...
- 【1】[leetcode-124] 二叉树中的最大路径和
(没做出来,典型题目重要) 二叉树中的最大路径和(hard) 给定一个非空二叉树,返回其最大路径和. 本题中,路径被定义为一条从树中任意节点出发,达到任意节点的序列.该路径至少包含一个节点,且不一定经 ...