CSS技术的使用场景：有效的减少了服务器接收和发送请求的次数，css精灵是一种出来网页背景图像的方式，将一个页面设计到的所有零星背景图集中到一张大图中去，然后将大图应用于网页 。通过background-position 和padding来实现

例如要切大图里的小图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        span {

            float: left;

            background: url(image/abcd.jpg);

        }

        span:first-child {

            width: 64px;

            height: 106px;

            background-position: -325px -142px;

        }

        span:nth-child(2) {

            width: 137px;

            height: 104px;

            background-position: -114px -564px;

        }

    </style>

</head>

<body>

    <span></span>

    <span></span>

    <span></span>

</body>

</html>

制作精灵图遵循原则
1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
2. 精灵图的宽度取决于最宽的那个背景
3. 可以横向摆放也可以纵向

CSS精灵技术（sprite）的更多相关文章

  1. CSS 精灵技术（sprite）

    一.精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.  然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...

  2. CSS精灵技术

    在CSDN中浏览博客时,在博客的结束有上一篇和下一篇的按钮,当我们把鼠标放上去的时候,可以看到这两个按钮会进行颜色的改变,这种技术称为CSS精灵技术.通过查看源发现,其实他是通过超级链接的伪类实现的, ...

  3. CSS——精灵技术

    精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...

  4. CSS Sprites (CSS 精灵) 技术

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

  5. 【CSS】CSS Sprites (CSS 精灵) 技术

    CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...

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

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  7. CSS之 元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形

    元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...

  8. css:background-position > 精灵技术

    background-position : length || length background-position : position || position 取值: length  : 百分数 ...

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

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

随机推荐

  1. python笔记3 闭包 装饰器 迭代器 生成器 内置函数 初识递归 列表推导式 字典推导式

    闭包 1, 闭包是嵌套在函数中的 2, 闭包是内层函数对外层函数的变量(非全局变量)的引用(改变) 3,闭包需要将其作为一个对象返回,而且必须逐层返回,直至最外层函数的返回值 闭包例子: def a1 ...

  2. 如何在国内使用google

    而Google却一直坚持“机器算法”至上,让信息以公正的排序结果呈现,对于IT人员来说国内不能用google进行搜索是很痛苦的. 公司邮件介绍了一些方法,mark一下还是很有用的. http://ww ...

  3. Flask request 属性详解

    Flask request 属性详解 一.关于request在Flask的官方文档中是这样介绍request的:对于 Web 应用,与客户端发送给服务器的数据交互至关重要.在 Flask 中由全局的 ...

  4. Qt编写自定义控件32-等待进度条控件

    一.前言 在各种各样的执行任务界面,有时候需要比较多的时间,需要给出一个直观的等待进度条表示当前正在执行的进度,而不至于懵逼在那里,用户不会觉得程序死了还是干嘛了. 等待进度条有好几种办法,比如直接叫 ...

  5. JAVA NIO学习笔记二 频道和缓冲区

    Java NIO 频道 Java NIO渠道类似于流,他们之间具有一些区别的: 您可以读取和写入频道.流通常是单向(读或写). 通道可以异步读取和写入数据. 通道常常是读取或写入缓冲区. 如上所述,您 ...

  6. 小记LoadRunner 11 安装VC2005运行环境报错处理

    这几天在做性能优化,需要在虚拟机里装个LoadRunner 11.从测试同学那里搞来安装包,按照文档提示安装系统运行环境,提示我要装VC2005 SP1. 安装程序自己安装,报错.截图如下. 于是我又 ...

  7. xdebug调试的原理

    转自 https://segmentfault.com/a/1190000002528341 使用PhpStorm+xdebug单步调试程序可以快速帮助自己熟悉项目代码! 运行原理 在实际使用前,我们 ...

  8. Unity Shader基础(1):基础

    一.Shaderlab语法 1.给Shader起名字 Shader "Custom/MyShader" 这个名称会出现在材质选择使用的下拉列表里 2. Properties (属性 ...

  9. Python报错：TypeError: data type not understood

    K-Means聚类算法 def randCent(dataSet, k): m, n = dataSet.shape # numpy中的shape函数的返回一个矩阵的规模,即是几行几列 centrod ...

  10. MemCache可视化客户端管理及监控工具TreeNMS

    参考地址:https://www.cnblogs.com/li150dan/p/9529054.html