【CSS之精灵图（雪碧图）与字体图标】的更多相关文章

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

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

CSS Sprites精灵图(雪碧图)

简介 CSS精灵图,是一种网页图片应用处理方式.允许将一个页面涉及到的所有零星图片都包含到一张大图中 利用CSS的"background-image","background- repeat","background-position"的组合进行背景定位, 访问页面时避免图片载入缓慢的现象. 优点 减少网页的http请求,从而提高页面的性能,这是其最大的优点,也是被广泛传播和应用的主要原因 能减少图片的字节 解决了网页设计师在图片命名上的困扰,只…

CSS Sprites ——雪碧图的使用方法

首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每个图片的坐标,这样不但减少http请求,而且还降低了图片的大小,加快图片的加载速度,对前端开发的朋友来说是必备技能.更详细的解释请到[百度百科]围观. 雪碧图使用场景 1.静态图片,不随用户信息的变化而变化 2.小图片,图片容量比较小 3.加载量比较大 注:一些大图片.有动态效果图片无需使用雪碧图…

css之background-position属性实现雪碧图

什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分. 为什么要用雪碧图 可以减少加载网页图片时对服务器的请求次数,提高页面的加载速度,解决IE6鼠标滑过时出现闪白的现象. 用雪碧图有什么弊端 个人认为如果你的雪碧图不是很大,也不是很复杂基本没什么弊端.如果你的雪碧图很大又复杂的话就有出现css代码复查,网页占内存大等各种问题. 实例 上面是一个按钮…

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

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

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…

css雪碧图（css splite）

将很多小的背景图片放在一起,可以减少http请求. 这些图片通常是一类的. 所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间 0 = 0…

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

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

简单的使用gulp生成雪碧图

有一个在线工具:https://www.toptal.com/developers/css/sprite-generator.生成雪碧图是极其方便的. 现在呢,我们来试试用gulp来生成雪碧图. 第一步:去淘宝镜像地址(http://npm.taobao.org/)里安装cnpm. $ npm install -g cnpm --registry=https://registry.npm.taobao.org 由于npm安装插件是从国外服务器下载,受网络影响很大,所以我们可以选装淘宝的cnpm…

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

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

CSS-sprit 雪碧图

CSS-sprit 雪碧图  可以将 多个小图片统一保存到一个大图片中,然后通过调整background-position来显示响应的图片        这样图片会同时加载到网页中 就可以避免出现闪烁的问题        这个技术在网页中应用十分广泛,被称为css-sprite ,也成为雪碧图 雪碧图的特点:          一次性将多个图片加载进页面,降低请求次数,加快访问速度,提升用户的体验          局限只适用于背景图片 不适用于GIF 通过改变background-positi…

CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position"来实现背景图片的定位技术. 二.图片整合的优势: 1)通过图片整合来减少对服务器的请求次数,从而提高 页面的加载速度. 2)通过整合图片来减小图片的体积.   2.CSS Sprites的实现方法 3.图片整合原则 1)边切图边整合. 2)定位时避免使用bottom,right等,用具体的数值,…

CSS雪碧图（精灵图）使用

1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图. 2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服务器发送请求,那么请求的次数将大大增加.由此出现了雪碧图的概念 3:用处:是一种CSS图像合并技术,方法是将众多小图标合并到同一张图上,用来减轻http请求压力.然后通过操作CSS的background属性,控制背景的位置以及大小,来展示需要的部分. 我也从网上找到了一张雪碧图:(其实就是一张图片放…

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

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

使用雪碧图Css Sprite精灵 | 加速网页响应速度

什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它允许你将一个页面涉及到的所有零星图片都包含到一张图中,这样一来,当访问页面时,就只需要下载1张图片了,这显然大大减低了服务器请求压力. 这个技术加速网页响应速度,加速的关键,不是降低质量,而是减少个数.传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算.…

css sprite，css雪碧图生成工具V3.0更新

V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 为什么要用这个工具 1.加快网页加载速度 浏览器接受的同时请求数是10个,如果图片过多会影响整体的视…

css 雪碧图 及jquery定位代码

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

Css雪碧图

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

CSS中的背景、雪碧图、超链接的伪类样式

一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填充 background-repeat: no-repeat;(有这三个常用的属性值: no-repeat.repeat-x.repeat-y) 4.背景图片大小 background-size:100% 100%: cover(覆盖):(先让图片水平填满容器)图片等比例缩放,直到最小部分填满容器有可能会出现…

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

CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. 加速的关键,不是降低重量,而是减少个数.传统切图讲究精细,图片规格越小越好,重量越小越…

CSS基础(滑动门，雪碧图，网页布局）

3.11.2017 这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧 CSS可见性(元素可见性) overflow: hidden:   将超出部分隐藏(部分隐藏) display:   none;   元素隐藏(全部隐藏)(隐藏元素不占位置) display:   block;   显示元素 visibility: hidden:  隐藏元素(全部隐藏)(隐藏元素占位置) 然后就是关于滑动门的讲解,现在的页面中好多地…

css sprite 雪碧图

使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导致访问速度变慢.这时候,把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开,就解决了上述的两个问题. 显示雪碧图的条件: 1)需要一个设置好宽和高的容器 2)需要设置background-position的值(默认为(0,0),也就是图片的左上角),即移动图片到自己想要的图标位置.…

compass与css sprite（雪碧图）

什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链接:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites 优点:1.减少页面请求数 2.降低图片占用字节 缺点:1.拼图麻烦 2.后期维护麻烦 为什么使用compass? 最近项目中需要使用到很多小图片,想用…

原创：CSS3技术-雪碧图自适应缩放与精灵动画方案

花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显,在缩放的屏幕上人物还是按照原尺寸大小显示 后来临时留了一节预备的方案:CSS3的scale处理直接可以让元素缩放 通过一个缩放的算放控制scale从而让雪碧图的元素可以缩放,目测还是不错. 但是这会带一系列的计算问题,因为通过sacle缩放后的元素,在浏览器布局中还是按照原尺寸计算的,所以这样的方案…

CSS Sprite雪碧图应用

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

使用compass自动合并css雪碧图(css sprite)

本文转载自: 使用compass自动合并css雪碧图(css sprite)…

CSS Sprite 雪碧图制作

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

CSS雪碧图自动生成软件

下载地址 http://www.99css.com/1524/ 包含详细的下载地址.下载步骤以及使用教程 亮点:自动合成雪碧图+自动生成雪碧图background-position代码 简单过程 下载 网页中的demo 并解压至 D 盘根目录 images 目录下存放三个子目录,将要合成雪碧图的图片放到子目录文件中 将要合成的图片直接拖到软件中,出现Image code 将Image code内的css代码复制覆盖到style.css文件中,再把style.css文件拖到软件中 最后打开_gag…

前端-如何用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雪碧图

为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w…