图标字体 VS 雪碧图——图标字体应用实践

本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点. 雪碧图雪碧图实例:淘宝PC端将多张小图放至一张大图使用的时候,通过background-position调整显示的位置,如下图所示: 雪碧图的使用方法使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数.因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chro…

把所有的小图标一起做成雪碧图吧请用gulp-css-spriter.

用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键第二步: npm install gulp-css-spriter https://www.npmjs.com/package/gulp-css-spriter (官网gulp插件) 第三步:在gulpfile.js 文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var gulp = require('gulp'); var spriter = require('gulp-css…

多个图标图片（雪碧图）使用CSS样式显示

现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态. 如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务器的并发连接数是受限的,通常是4~8个,那么图标显示过慢或者超时的情况就会发生. 当然了,像采用CDN,或者按照浏览器的并发数对图片文件进行域名分散存储处理也是再好不过的,但不是都有这样的条件. 一般都会把图标文件做的尽可能小,尽管如此,1张50k的文件比起50张1k文件下载起来还是很有优势的. 那…

css雪碧图（精灵图）与字体图标的介绍以及对比

css雪碧图(精灵图)与字体图标的介绍以及对比设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这样的话,就会导致请求数量太多,造成资源浪费,以及访问速度变慢. 碰到这样的情况,可以使用两种方式解决这种问题:CSS雪碧图以及字体图标.但是这两种方式也都有不同的适用场景,需要根据实际需求来做取舍. 1.CSS雪碧图简介 CSS雪碧图即 CSS Sprites,也有人叫它CSS精灵图,是一种CSS…

css背景雪碧图等

1.背景图雪碧图技术要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>魔降风云变</title> <style> .bg{ width: 1200px; height: 1200px; border: 1px solid #0c0c0c; backgroun…

前端-如何用gulp快速搭建项目（sass预编译，代码压缩，css前缀，浏览器自动刷新，雪碧图合成）

一:gulp优点: 易于使用通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 易于学习通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道. 二.依赖安装 1.安装node.js, 2.全局安装gulp npm install gulp -g 3.本地安装gulp npm init…

CSS Sprite雪碧图的应用

CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景静态图片,不随用户信息的变化而变化. 小图片,容量比较小(2~3k). 图片加载量比较大. 目的减少Http请求数量,加速内容显示.因为每请求一次,就会和服务器建立一次链接,而建立链接是需要额外的时间的. 使用使用雪碧图之前,我们需要知道雪碧图中各个图标的位置. 从上面的图片不难看出雪碧图中各个…

Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法

在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带宽和资源. 雪碧图插件一般还支持快速引用小图标,例如当我们需要在html中放入service.png这张图片时,我们只需要使用<i class="icon icon-service"></i>这样的简单引入方式,省去了繁琐的引入图片的样式编写,大大提升效率. 在Vu…

!!字体图标（iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等）。图片压缩

http://www.iconfont.cn/ 阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.com/p/font-awesome/#icons-new 2015-10-27 http://isux.tencent.com/icon-font.html 图标字体化浅谈(教程) 2015-11-3 https://icomoon.io/app 图标字体生成器 IcoMoon!一个可以通过个…

雪碧图和如何实现浏览器中title的小图标

background-position 雪碧图我们的html和css中有三个属性可以向服务器发送请求 ser href url 2.overflow (1) 值hidden 超出就隐藏 (2)值scroll 出现滚动条 visibility:hidden 可见的(消失但是占用位置) display:none 消失但不占用位置为什么要使用雪碧图因为我们使用雪碧图之后,本来需要多次请求的图片,我们一次就能请求过来,然后使用 background-position 调位置,从而减少了该页面想服务…

快速获取雪碧图的图标样式插件 - gulp-css-spriter教程

如何快速把合成好的雪碧图,快速获取图标的样式呢? 用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键第二步: npm install gulp-css-spriter https://www.npmjs.com/package/gulp-css-spriter (官网gulp插件) 第三步:在gulpfile.js 文件 var gulp = require('gulp'); var spriter = require('gulp-css-spriter…

雪碧图（background-position）、overflow、title中的小图标、光标、rgb 和opacity 与rgba

一.background-position 雪碧图我们的html和css中有三个属性可以向服务器发送请求:src url href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之后,本来需要多次请求的图片,我们一次就请求过来了二.overflow 1.值hidden:超出就隐藏 2.值scrol:出现滚动条 visibility:hidden:可见的(消失但是占用位置) display:none:消失但不占用位置三.title中的小图标 1.如何实现浏览器title中的…

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

一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描述了每一个文字的形态,一般中文文件大,英文文件小,因为中文字符数多:在控制面板中可以找到文字文件夹,在C:\Windows\Fonts下也可以直接找到.另外如果想让自己的电脑上有更加丰富的字体,可以下载新的字体文件后复制到改位置. b).我们在文档中显示的字体应该在系统中能找到才会正常显示,比如你在…

CSS Sprite、CSS雪碧图应用实例

CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置. CSS 雪碧图技术不是什么新东西,在网页应用中已经有几年了,现在的网页开发在图标图片的应用上已经趋向于使用字体图标,这是一种比CSS雪碧图技术更优雅的图标应…

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

一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复. 提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果. 属性值:url('URL') 指向图像的路径.none 默认值.不显示背景图像.inherit 规定应该从父元素继承 background-image 属性的设置. 2.background-s…

方便前端使用的SVG雪碧图

更多代码详情:github.crmeb.net/u/LXT 简介由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不同分辨率.不用担心模糊和锯齿.同时还能更改图标的填充颜色. CSS雪碧图和SVG雪碧图传统的CSS图标可以分为图片图标和字体图标. 图片图标是将所有的icon整合到一张图中,然后通过定位获取其中的某个图标.优点是管理简单,网络请求少.缺点是在高像素屏幕上图标和周边内容相比会显得比较模糊:大小固定:大多数样式无法修改,单个图标使用场景有限. 相对来说…

compass Sprites 雪碧图小图片合成[Sass和compass学习笔记]

demo 源码地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. compass 中为我们提供了简洁的工具和方法生成雪碧图 API 在这里 http://compass-style.org/reference/compass/utilities/sprites/ 雪碧图只须…

前端工程师技能之photoshop巧用系列第五篇——雪碧图

× 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护前面的话前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图定义 css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中.使用雪碧图的处理方式可以实现两个优点: [1]减少http请求次数 [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) 凡事都不完美,实现优点的同时也带来了缺点,即提高了网…

CSS Sprite雪碧图应用

在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更优的解决方案是:雪碧图sprite. 所谓雪碧图就是把我们所需要的所有小图片用CSS sprite或者PS工具拼接成一张大图片,然后通过元素的background-image.background-positon属性完成图片的定位. 为此,我做了个Demo. 在学习的过程中,遇到了背景图片定位的问题,也就是b…

css 雪碧图的制作

很多网站其实都用了雪碧图,确实方便了制作,以前以为这种小图标,都是一个一个图片呢(笑) 效果图如下: 代码如下: <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> h3,ul {margin: 0;padding: 0;} ul{list-style: none;} li h3{font-size: 14…

CSS Sprite 雪碧图制作

CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需要相关图标时,根据background-position设置坐标值,达到目的.…

css 雪碧图及jquery定位代码

无意间发现了一个很神奇的事情,就是鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(sprite) 也叫雪碧图. CSS知识点: background-image backgorund-position 特点: 相对于当个小图标,它节省文件体积和服务请求次数.将所有零碎的网页背景图片整合到一起,这样做可以有效的减少http对图片的请求次数,而不需要加载多次加载零碎的背景图片,所以合理的利…

雪碧图（sprite）

雪碧图是一种将网页上常用且不经常变动的小图标集中在一张大图中,根据网页需求来显示图片的技术. 可以提高网页加载速度,增加用户体验. 其原理是通过html块状元素建立一个满足需求的视图窗口,然后在窗口背景中载入处理过的.规则的集成了小图的大图.图片加载后,根据需求来测量出需要小图的坐标,让其准确的显示在我们建立好的窗口中. 它的好处是我们可以与后台交互一次,就可以满足网页上很多小图标的加载. 它的劣势在于,如果每次修改都会较为麻烦,容易出错. 所以,经常将它用在不怎么会经常改动的icon小图…

gulp多张图片自动合成雪碧图

相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.对于一些图片较多的项目,这个过程可能要花费我们一天的时间,来实现这步.今天我给大家带来一个工具,将这一步缩短到几秒钟就能完成,究竟是什么工具这么神奇呢,他就是gulp的一个插件gulp.spritesmith.下面一张图来说明他能做什么. 看到这个图片介绍,相信大家已经对gulp.spritesmith能做到什么一目了…

Css雪碧图

Css雪碧图: CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理:CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量.该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签. 如何生成雪碧图? 安…

gulp填坑记（二）——gulp多张图片自动合成雪碧图

为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时间,来实现这步.今天这一步缩短到几秒钟就能完成,究竟是什么工具这么神奇呢,他就是gulp的一个插件gulp.spritesmith.下面一张图来说明他能做什么. 第一步:npm install --save-dev gulp.spritesmith 安装 gulp.spritesmith 第二部:配…