版权声明：本文为博主原创文章，未经博主同意不得转载。 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. 远程备份binlog服务

    Ⅰ.bonlog server介绍 对于binlog的备份,之前文章里说的是有从机,一般不备份,那现在人家就是 要备份嘛,怎么办嘛, 写个脚本每天夜里去把前一天产生的binlog拷贝出来可以不? 行啊 ...

  2. 双层嵌套json字符串(即json对象内嵌json数组)解析为Map

    之前我层写过一篇文章,介绍了json与map的相互转化,但当时只涉及到单一的json对象或json数组,对json对象内嵌套这json数组的json字符串无法处理,这篇文章主要解决这个问题. 之前的那 ...

  3. BZOJ_1826_[JSOI2010]缓存交换 _线段树+贪心

    BZOJ_1826_[JSOI2010]缓存交换 _线段树+贪心 Description 在计算机中,CPU只能和高速缓存Cache直接交换数据.当所需的内存单元不在Cache中时,则需要从主存里把数 ...

  4. B20J_2836_魔法树_树链剖分+线段树

    B20J_2836_魔法树_树链剖分+线段树 题意: 果树共有N个节点,其中节点0是根节点,每个节点u的父亲记为fa[u].初始时,这个果树的每个节点上都没有果子(即0个果子). Add u v d ...

  5. BZOJ_3011_[Usaco2012 Dec]Running Away From the Barn _可并堆

    BZOJ_3011_[Usaco2012 Dec]Running Away From the Barn _可并堆 Description 给出以1号点为根的一棵有根树,问每个点的子树中与它距离小于l的 ...

  6. NOIP2017 酱油送命记

    Day0 一天,在机房,有点考前的紧张和慌张,打了一下午的模板,立了3个不该立的flag... Day1 拿到试题,万分紧张,T1是数论啊 害怕,一直以为D2T1才是数论,仔细观察却发现(flag1: ...

  7. csc.exe的环境变量设置

    csc.exe使用来编译*.cs文件的,但必须要在安装目录下使用.所以需要设置一下环境变量. C#的环境变量设置 1.“win+R” 打开运行窗口,并输入 “cmd”: 2.运行“set path=% ...

  8. Postman----presets与环境变量的联合使用

    一.环境 在开发不同阶段,可能存在不同的环境(对我碰到的就是服务器地址/api版本/header信息等不一样),比如 debug环境和release环境,每次切换环境测试的时候都得重新配置url信息, ...

  9. 用js制作数码时钟

    实现效果 实现效果 图片素材 图片素材 原理分析 用setInterval(fn, 1000)来循环刷新图片. 用date对象的getHours().getMinutes().getSeconds() ...

  10. Entity Framework Core 关联删除

    关联删除通常是一个数据库术语,用于描述在删除行时允许自动触发删除关联行的特征:即当主表的数据行被删除时,自动将关联表中依赖的数据行进行删除,或者将外键更新为NULL或默认值. 数据库关联删除行为 我们 ...