版权声明：本文为博主原创文章，未经博主同意不得转载。 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. Tiny4412MMU内存管理

    MMU是Memory Management Unit的缩写,中文名是内存管理单元,MMU是由ARM芯片中的cp15协处理器管理,它的作用是负责虚拟内存到物理内存的映射 要将虚拟内存映射为物理内存,就要 ...

  2. Windows Defender Service 是选择Windows 10系统的最大障碍！

    今天从早上开始,Windows Defender Service服务从CPU消耗资源30%一直上升到60%并且无法下降. 我一直使用的是Windows 10 Enterprise 2016长期服务支持 ...

  3. 手把手教你使用 netlify 实现前端的 自动部署 + HTTPS

    随着开源工具越来越多,特别是nodejs构建微服务器之快,实现前端自动化部署越来越简单了,有可能[10行js代码+10行sh脚本+设置github的webhook]就能实现,但是如果你和我一样,就是& ...

  4. setInterval setTimeout 详解

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...

  5. 你不知道的JavaScript--Item21 漂移的this

    而在 JavaScript 中,this 是动态绑定,或称为运行期绑定的,这就导致 JavaScript 中的 this 关键字有能力具备多重含义,带来灵活性的同时,也为初学者带来不少困惑.本文仅就这 ...

  6. C/C++中结构体struct 的使用

    结构(struct)      结构是由基本数据类型构成的.并用一个标识符来命名的各种变量的组合.  结构中可以使用不同的数据类型.      1. 结构说明和结构变量定义      在Turbo C ...

  7. linux下怎么样上传下载文件夹

    Linux下目录复制:本机->远程服务器 scp -r /home/shaoxiaohu/test1 zhidao@192.168.0.1:/home/test2 test1为源目录,test2 ...

  8. 火狐浏览器插件--xpath利器

    以前在做web自动化的时候,免不了要找定位啊什么的.一层层找下来太痛苦了,时间也浪费了一天写不了啥.特别是在最开始接触自动化的时候,我们系统坑爹的只支持IE.后来换公司了,在偶然情况下,得知了fire ...

  9. ResultSet,RowSet,OracleCachedRowSet和RowSetMetaData区别及联系

    在java主要涉及到数据开发的过程中,我们会和数据库打交道很多,其中使用了数据集比如ResultSet和RowSet,经常使用两种,还有其它的一些,那么这两种的主要区别是什么呢?我们先来看它们引入的方 ...

  10. APP内置react 应用与APP的交互问题

    一.内置的H5应用唤起(返回)app 可以用 intent url 来唤起,但要求 webview 实现 shouldOverrideUrlLoading() ,解析 uri,找到对应的 activi ...