【08】css sprite是什么,有什么优缺点
概念:将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点:
- 减少HTTP请求数,极大地提高页面加载速度。
- 增加图片信息重复度,提高压缩比,减少图片大小。
- 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现。
缺点:
- 图片合并麻烦。
- 维护麻烦,修改一个图片可能需要从新布局整个图片,样式。
**
【08】css sprite是什么,有什么优缺点的更多相关文章
- 01. css sprite是什么,有什么优缺点?
1.css sprite是什么,有什么优缺点? 通常被意译为“CSS图像拼合”或“CSS贴图定位” 1)CSS Sprites的优点 利用CSS Sprites能很好地减少网页的http请求,从而大大 ...
- CSS Sprite的优缺点分析
目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被 ...
- CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
- css sprite,css雪碧图生成工具V3.0更新
V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...
- css sprite 调整大张图片中小图标的大小
直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...
- HTML CSS SPRITE 工具
推荐一个CSS SPRITE工具 网盘分享:http://pan.baidu.com/s/1sjx7cZV
- CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
- CSS雪碧,即CSS Sprite 简单的例子
CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...
- 使用compass自动合并css雪碧图(css sprite)
本文转载自: 使用compass自动合并css雪碧图(css sprite)
随机推荐
- css水平垂直居中块整理
1.绝对定位+负margin 兼容性很好,但需要指定子块的高度和宽度,以及负margin .wp{ position: relative; width: 200px; height: 200px; b ...
- 通用全局CSS样式
PC全局样式 *{padding:0;margin:0;} div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{ ...
- watir-webdriver使用过程中异常
1.在jruby版本1.6.7中,报异常:not such file to load --watir-webdriver 解决方法 :在文件的首行添加:require 'rubygems' ...
- Java方式配置Spring
概述 本文主要讲的是如何使用Java Bean来配置Spring,而不是用xml来配置Spring. 本文主要是代码,需要注意的都在注释里面. 代码打包下载地址(注:项目使用Maven构建) Java ...
- asp.net 图表
感谢csdn深南大道,文章转自http://blog.csdn.net/smartsmile2012/article/details/17356673 前台代码 <div> <asp ...
- Yii2.0数据格式器
平时我们在写代码中,总是要写一个单独的文件来全局处理常用的数据格式.Yii2.0却很人性化,为我们内置了一套数据格式器. 1.格式化日期和时间 Yii::$app->formatter-> ...
- c#将本地文件上传至服务器(内网)
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Mybatis-Generator逆向生成Po,Mapper,XMLMAPPER(idea)
前文有一篇手工生成的说明,地址: http://www.cnblogs.com/xiaolive/p/4874605.html, 现在这个补充一下在idea里面的自动版本的数据库逆向生成工具: 一.g ...
- fckeditor配置详解
使用配置设置: . FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称 . FCKConfigFCKConfig.EditorAreaC ...
- shell脚本,如何破解字符串对应的md5sum前的RANDOM对应数字?
已知下面的字符串是通过RANDOM随机数变量md5sum|cut-c 1-8截取后的结果,请破解这些字符串对应的md5sum前的RANDOM对应数字?[root@localhost md5]# cat ...