css--图片整合（精灵图）
图片整合（精灵图）
精灵图的优点：
- 减少图片的字节
- 减少了网页的http请求，从而大大的提高了页面的性能
- 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
- 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
通用代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片整合</title>
<style>
.box{
width:200px;
margin:0 auto;
overflow:hidden;
background:url(img_navsprites_hover.gif )0 0;
background:no-repeat;
}
.into{
float:left;
width:43px;
margin-left:10px;
height: 44px;
}
.span1{
background:url(img_navsprites_hover.gif )0 0;
}
.span1:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
.span2{background:url('img_navsprites_hover.gif') -47px 0;}
.span2:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
.span3{background:url('img_navsprites_hover.gif') -91px 0}
.span3:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>
<body>
<div class="box">
<span class="into span1"></span>
<span class="into span2"></span>
<span class="into span3"></span>
</div>
</div>
</body>
</html>运行结果：
总结：
- 精灵图可以通过浮动加背景图片来实现
- 精灵图也可以通过ul也可以实现主要是后期的定位移动。
css--图片整合（精灵图）的更多相关文章
- css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
- CSS——精灵图与背景图片定位
精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...
- 移动端（视口(meta)，像素比，二倍图(图片，背景图，精灵图)，css初始化(normalize.css)，特殊样式，常见屏幕尺寸）
1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta name = ...
- CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
- 【CSS sprites （CSS图片精灵） 详解】
本文包含 CSS sprites 简介.原理.适用在哪些类型的网页制作中.背景图片的 position 值如何确定以及制作 sprites 的技巧. [CSS sprites 简介] CSS Spri ...
- 从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- css精灵图&字体图标
精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大 ...
- css精灵图使用
1. 精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的b ...
- CSS之精灵图（雪碧图）与字体图标
本文内容: 精灵图 字体图标 首发日期:2018-05-01 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了 ...
- 7：CSS Sprites的原理（图片整合技术）
7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...
随机推荐
- 转载自：StringUtils的常见方法
转载自:https://blog.csdn.net/simple_smile_sun/article/details/51819158 注:运用StringUtils需要导入相关jar文件,commo ...
- 《SQL Server 2012 T-SQL基础》读书笔记 - 3.联接查询
Chapter 3 Joins Cross Joins(交叉联接)就是返回两个表的笛卡尔积(m行的表cross join一个n行的表得到一个m * n行的结果),它有两种标准SQL语法,第一种: SE ...
- 标签button：点击button按钮时，出现了页面自动刷新的情况
原html: <button class="btn btn-primary" id="btnSubmit" name="btnSubmit&qu ...
- vue2.0 之 douban （二）创建自定义组件tabbar
1.大体布局 这个组件分为两部分:第一个是组件的外层容器,第二个是组件的子容器item,子组件里面又分为图片和文字组合.子组件有2个状态,一个默认灰色的状态,一个选中状态,我们来实现一下这个组件的布局 ...
- Unity各版本差异
Unity各版本差异 version unity 5.x 4.x 2017 差异 特点 首先放出unity的下载地址,然后再慢慢分析各个版本.再者unity可以多个版本共存,只要不放在同一目录下. ...
- 像计算机科学家一样思考python－第3章 函数
在程序设计中,函数是指用于进行某种计算的一系列语句的有名称的组合.定义一个函数时,需要指定函数的名称并写下一系列程序语句.之后,就可以使用名称来“调用”这个函数 3.1函数调用 一个函数调用的例子 & ...
- 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第2节 抽象类_14-抽象的概念
先来了解什么叫做抽象 父类有个计算面积的方法,但是不同的图形计算面积的方式是不一样的.所以这里的计算面积的方法就是个抽象的方法. 只有到具体的子类里面才能去实现具体的计算面积的方法 动物类是父类.有吃 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_08 Map集合_4_Map集合遍历键找值方式
键找值的方式 增强for 增强for的简化方式
- QTP技术支持之QTP对象无法识别（转自582357212的个人空间，链接：http://www.51testing.com/html/64/305564-847787.html）
QTP自动化测试从业者,或者很多练习使用QTP开发自动化测试代码的人员遇到最多的问题恐怕就是对象无法识别了,对象无法识别原因有很多种,根据经常对QTP自动化测试脚本开发人员的技术Support,我总结 ...
- UI自动化之js\jquery的应用
js\jquery的应用,有很多难以定位到的,可以通过js或者jquery来处理 目录 1.js 2.jquery 1.js 1.1js有5种定位,最后execute_script(js)来执行js ...