图片整合（精灵图）

精灵图的优点：

  • 减少图片的字节
  • 减少了网页的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--图片整合（精灵图）的更多相关文章

  1. css sprites（精灵图）如何使用？

    CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...

  2. CSS——精灵图与背景图片定位

    精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...

  3. 移动端（视口(meta)，像素比，二倍图(图片，背景图，精灵图)，css初始化(normalize.css)，特殊样式，常见屏幕尺寸）

    1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta  name = ...

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

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  5. 【CSS sprites （CSS图片精灵） 详解】

    本文包含 CSS sprites 简介.原理.适用在哪些类型的网页制作中.背景图片的 position 值如何确定以及制作 sprites 的技巧. [CSS sprites 简介] CSS Spri ...

  6. 从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  7. css精灵图&字体图标

    精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大 ...

  8. css精灵图使用

    1. 精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的b ...

  9. CSS之精灵图（雪碧图）与字体图标

    本文内容: 精灵图 字体图标 首发日期:2018-05-01 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了 ...

  10. 7：CSS Sprites的原理（图片整合技术）

    7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...

随机推荐

  1. vue-cli目录结构介绍

    一个vue-cli的项目结构如下: 文件结构细分: 1.build——[webpack配置] build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入npm ru ...

  2. django 给数据库批量添加数据

    from .models import Book import random def index(request): book_list = [] for i in range(1, 101): bo ...

  3. 去掉IE浏览器里的脚本控件提示

    如果是你在网站制作网站让后进行测试,直接在IE浏览器中打开本地含有脚本或者ActiveX控件的页面时,IE就会弹出一个提示栏,说:”为了有利于保护安全性,Internet Explorer己限制此网页 ...

  4. Oracle 修改语言环境

    Oracle数据库还是用英文的比较好,毕竟是外国人开发的.而且许多提示都是模板化 的,所以不懂英文,也不要怕,多Google就会了. 唉,安装Oracle 数据库时,手贱语言选择了中文和英语.结果使用 ...

  5. git_03_git可视化工具github Desktop使用教程

    前言 github desktop是github的桌面客户端,支持Windows和Mac OS版本.使用简单,可以查看.切换和创建分支,以及提交.合并或部署代码. 下载 由于电脑限制,这里以mac o ...

  6. LDAP分布式数据库的介绍和安装使用

     目录服务 目录是一个为查询.浏览和搜索而优化的专业分布式数据库,它呈树状结构组织数据,就好象Linux/Unix系统中的文件目录一样.目录数据库和关系数据库不同,它有优异的读性能,但写性能差,并且没 ...

  7. jquery悬停和移出事件

    $('#hides').mouseover(function () { alert("sdfdsf")}).mouseout(function () { alert("啊 ...

  8. JDK11 | 第三篇 : 局部变量类型推断

    文章首发于公众号<程序员果果> 地址 : https://mp.weixin.qq.com/s/PB0Mw4bzjDML7nto2M8x2w 一.简介 Java局部变量类型推断(LVTI) ...

  9. [BZOJ4358]Permu(回滚莫队)

    [BZOJ4358]Permu(回滚莫队) 题面 给出一个长度为n的排列P(P1,P2,...Pn),以及m个询问.每次询问某个区间[l,r]中,最长的值域连续段长度. 分析 最简单的方法显然是用线段 ...

  10. <meta>标签中http-equiv属性的属性值X-UA-Compatible详解

    X-UA-Compatible是针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE> ...