版权声明：本文为博主原创文章，未经博主同意不得转载。 https://blog.csdn.net/XTQueen_up/article/details/37601361

说白就是用样式表切一个大图片

如今非常多好的站点都是这么写，然后非常多位置的图片，就用一张图片。然后一次URL请求即可了。加快站点訪问速度

这个就是切片工具能够直接导出下图框框中的内容

这个是切片工具 所有拆分切开 用CSS精灵的方式合并到一起就ok了

这里就是CSS精灵的写法 全用的一张图片 默认是 图片的位置是你div的左上角開始，我们用background-position，给他向左。向上移动一下 ，显示效果就变了。将会显示不同位置的图片，有些地方须要做平铺。所以我是横着切图的。终于文件就是那个res.png。

那么怎样推断位置究竟是多少？

用PS的切片工具，能够直接看到位置和宽高

 

————————————————————————————————————

原文地址 ： 点击打开链接

CSS Sprites(基本写法，怎样使用)的更多相关文章

  1. 【CSS sprites （CSS图片精灵） 详解】

    本文包含 CSS sprites 简介.原理.适用在哪些类型的网页制作中.背景图片的 position 值如何确定以及制作 sprites 的技巧. [CSS sprites 简介] CSS Spri ...

  2. CSS Sprites优缺点

    利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因: CSS Sprites能减少图片的字节, ...

  3. 神奇的CSS sprites，制作特效的新方法

    本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...

  4. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  5. Css Sprites 多张图片整合在一张图片上

    CSS Sprites原理: CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backgro ...

  6. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  7. 使用CSS sprites减少HTTP请求

    sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...

  8. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  9. 【转】CSS Sprites教程大全（使用方法、工具介绍）

    什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...

随机推荐

  1. Java 8 文件操作（转）

    我们知道在JDK6甚至之前的时候,我们想要读取一个文本文件也是非常麻烦的一件事,而现在他们都变得简单了, 这要归功于NIO2,我们先看看之前的做法: 读取一个文本文件 BufferedReader b ...

  2. echart css样式弄了几个月了，样式一直都没有好好解决，好激动

    legend 图例,每个图表最多仅有一个图例.try this » 名称 默认值 描述 {string} orient 'horizontal' 布局方式,默认为水平布局,可选为:'horizonta ...

  3. 好代码是管出来的——使用Git来管理源代码

    软件开发过程中一个重要的产出就是代码,软件的编码过程一般是由一个团队共同完成,它是一个并行活动,为了保证代码在多人开发中能够顺利完成,我们需要使用代码版本控制工具来对代码进行统一存储,并追踪每一份代码 ...

  4. S/4 HANA中的数据库锁策略

    S4中的新的MM数据模型以及HANA的Insert-only特性允许物料凭证的并行处理,提高了相关的吞吐量.由此,数据库锁的应用情况也发生了变化.下文将介绍这些变化(基于S4 1610). 本文链接: ...

  5. Tomcat 优化方案 和 配置详解（转）

    转自 Tomcat 优化方案 和 配置详解 http://201605130349.iteye.com/blog/2298985 Server.xml配置文件用于对整个容器进行相关的配置. <S ...

  6. rename.go

    {         if err != nil {             return err         }         return syscall.EINVAL     }     r ...

  7. Dubbo原理和源码解析之服务引用

    一.框架设计 在官方<Dubbo 开发指南>框架设计部分,给出了引用服务时序图: 另外,在官方<Dubbo 用户指南>集群容错部分,给出了服务引用的各功能组件关系图: 本文将根 ...

  8. （5）STM32使用HAL库实现串口通讯——实战操作

    功能需求: (1)对接收的字符串原样返回(每10个字符一次). (2)发送一个字符串完成后改变LED的状态. 1.创建工程 使用的是F407Discovery,4个LED对应PD12-PD14. (1 ...

  9. ISCC 2018 (Please give me username and password)

    做过iscc 2018之后有了很多的感触,也有更多的了解自己的不足之处,整理了一下web的wp, 为了保证各位小伙伴的阅读质量,我将会把wp以每一道题一个博文的形式写出来,希望能够帮助到你们 其中的步 ...

  10. 使用Akka的远程调用

    概述 正如其它RPC或者RMI框架那样,Akka也提供了远程调用的能力.服务端在监听的端口上接收客户端的调用.本文将在<Spring与Akka的集成>一文的基础上介绍Akka的remote ...