【深入浅出CSS（二）：关于雪碧图、background-position与steps函数的三角恋情】的更多相关文章

深入浅出CSS（二）：关于雪碧图、background-position与steps函数的三角恋情

[测试代码] HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="id=edge"> <meta name="viewport" content="width=d…

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

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

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? 最近项目中需要使用到很多小图片,想用…

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 Sprite 雪碧图制作

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

前端优化：css雪碧图实践应用详解

一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪碧图,以及工作中的实际应用. 一 .为什么需要使用雪碧图 比方说现在经理要我们给页面添加一个侧边任务栏,效果如下:  呵呵,作为一名资(too)深(young)的前端,我刷刷刷为页面增加ul还有几个然后再给每个li添加背景图片,哈哈,任务就这么完成了,然后commit了一下自己的代码.此处应该要有代…

css 雪碧图 及jquery定位代码

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

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

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 第二部:配…

CSS Sprite雪碧图

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

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

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

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

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

gulp-css-spriter 将css代码中的切片图片合并成雪碧图

NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'),     minifyCSS = require('gulp-minify-css'),     spriter = require('gulp-css-spriter'); gulp.task('css', function() {     var timestamp = +new Date();    …

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

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

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

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

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

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

CSS雪碧图（精灵图）使用

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

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 sprite 雪碧图

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

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

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

CSS Sprite雪碧图的应用

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

V4.0到来了，css雪碧图生成工具4.0更新啦

V3.0介绍 http://www.cnblogs.com/wang4517/p/4476758.html V4.0更新内容 V4.0下载地址:http://download.csdn.net/detail/wx247919365/8685489 提示:如果不是win7或者程序运行不起来的话请下载微软的.net framework 3.5运行环境 一.增加客户端版本更新提醒 服务器端版本更新后,客户端如果没有更新要最新版本,会在标题中提示,点击更新按钮出现版本更新的简单介绍 二.删除多余的选择背…

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

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

CSS Sprite雪碧图应用

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

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

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

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雪碧图自动生成软件

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

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

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

微信小程序之雪碧图(css script)

今天有朋友问我关于微信小程序中如何在不占用大量网络带宽的情况下快速加载图片,我给他推荐了两种方式 1.雪碧图(css script),有过前端经验的朋友应该都有接触过. 2.懒加载. 由于时间关系我就先为大家介绍第一种雪碧图加载,其实雪碧图加载就是将多张大小尺寸基本相同类型的图片 拼凑在一起形成一张新的图片,在页面中不会一个图片就向网络发送一次请求,这样会使得图片加载缓慢,影响 用户体验感.这里的雪碧图是由CssGaga拖拽生成的,这个软件的使用就不为大家介绍了,网上很多下载地址. 操作很简单.…