Css - 精灵图css sprite

一个页面文档上总是会有N多的图标小图片，它们都是以背景图的方式嵌入文档，每个小图片需要一个url的css属性，每个url都指向一个服务器地址的链接，每个链接都代表要向服务器发起一次请求，这就给文档加载带来了一定的延迟，所谓精灵图是指将需要的多张小图片做成一张大图，只需要利用css的background-position对图片进行合理的背景设置即可减轻服务端压力，同时还缩短了文档载入的时间。

  1. * {
  2.     margin: 10px auto;            
  3. }
  4.  
  5. div {
  6.     background: url(Img/index.png) no-repeat;
  7. }
  8.         
  9. #icon1 {
  10.     width: 27px;
  11.     height: 24px;
  12.     background-position:0 -185px;
  13. }
  14.  
  15. #icon2 {
  16.     width: 58px;
  17.     height: 59px;
  18.     background-position: -183px 0;
  19. }
  20.  
  21. #icon3 {
  22.     width: 26px;
  23.     height: 27px;
  24.     background-position: -157px -105px;
  25. }
  26. <body>
  27.     <div id="icon1"></div>
  28.     <div id="icon2"></div>
  29.     <div id="icon3"></div>
  30. </body>

确定需要的图片的偏移量是通过在ps中使用切片工具将小图切好，再右击切片图-编辑切片找到小图的x和y轴的偏移量

Css - 学习总目录

Css - 精灵图的更多相关文章

  1. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  2. 第9天：CSS精灵图

    今天重点学习了CSS精灵图. "CSS精灵",英语css sprite,所以也叫做"CSS雪碧"技术.是一种CSS图像合并技术,该方法是将小图标和背景图像合并到 ...

  3. css雪碧图-css精灵图

    先将图片拼接在一张图上.类似实现的效果图 图片地址为合并后的图片地址,通过background-position调整背景图的位置.效果如: HTML: <div class="logo ...

  4. CSS背景和精灵图

    如何设置背景图片? 1.在CSS中有个叫做background-image:url():的属性,就是专门用于设置背景图片的. 2.注意点: 1)图片的地址必须放在url()中,图片的地址可以是本地的地 ...

  5. H5 40-CSS精灵图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HTML连载35-背景图片的练习、精灵图

    一.背景图片练习 解释:这个例子需要注意的是,我们背景图片嵌套到另一个图片之中.我们设计的注意点在于,怎么定位到我们想定位到的地方. 总结:背景图片就是一块一块的,我们想把块的位置定位好(一般就是宽和 ...

  7. CSS Spritec下载,精灵图，雪碧图，初探之原理、使用

    CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...

  8. CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）

    一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...

  9. Uint 7.文本和字体属性,background,精灵图和3种定位

    一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...

随机推荐

  1. 手机nv

    NV值是记录手机的射频参数的,和手机的IMEI号.手机信号.WIFI信号等有关,如果NV值刷没了,手机没有这些校准的数据了,会对手机有一定的影响. qcn里面包含手机的imei 所有改变imei就改变 ...

  2. java中异常的面试

    https://blog.csdn.net/qq_36523638/article/details/79363652 1) Java中的检查型异常和非检查型异常有什么区别? 这又是一个非常流行的Jav ...

  3. JS数据交换的三种方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 表连接join on

    表A记录如下:  aID aNum  1 a20050111  2 a20050112  3 a20050113  4 a20050114  5 a20050115  表B记录如下:  bID bNa ...

  5. MySQL内存占用计算

    ##MySQL 最大可使用内存( M ): SELECT ( @@key_buffer_size + @@innodb_buffer_pool_size + @@query_cache_size + ...

  6. PHP7 网络编程（一）多进程初探

    准备 我们都知道PHP是单进程执行的,PHP处理多并发主要是依赖服务器或PHP-FPM的多进程及它们进程的复用,但PHP实现多进程也意义重大,尤其是在后台Cli模式下处理大量数据或运行后台DEMON守 ...

  7. hbase 实战项目

    首先 根据 hadoop 搭建 + hbase 搭建把 环境弄好 由于 hbase 依赖于 hdfs ,所以 需要 进入 hadoop -->sbin 下 启动 start-dfs.sh , s ...

  8. Spring Boot - Error creating bean with name 'dataSource' defined in class path resource

    看起来像最初的问题是与自动配置. 如果你不需要数据源,只需从自动配置过程中删除它: @EnableAutoConfiguration(exclude={DataSourceAutoConfigurat ...

  9. Silverlight分页

    对于分页,首先要明确一些高效率的策略: 1.一次获取还是每次获取一页的数据 既然考虑了分页,肯定是数据量大,大到不能一页来显示,可能会很多页,我的做法更倾向于,首先要考虑用户可能看的页数,就是说用户可 ...

  10. Vertica系列: Vertica DB连接负载均衡

    背景 谈到负载均衡, 对于数据库集群需要区分几个概念: 运算的负载均衡, Vertica 本身是 MPP 数据库, SQL 操作自动会利用多台机器来加快处理速度. 数据库连接的负载均衡, Vertic ...