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. SQL-W3School-高级：SQL VIEW（视图）

    ylbtech-SQL-W3School-高级:SQL VIEW(视图) 1.返回顶部 1. 视图是可视化的表. 本章讲解如何创建.更新和删除视图. SQL CREATE VIEW 语句 什么是视图? ...

  2. Python - social-auth-app-django 模块 - 商城项目 第三方方式登录 - 微博

    开发准备 开通微博开发者权限 点击这里 进入 微博开放平台 开通后权限后创建应用 创建网页应用, 此处不需要进行审核即可使用测试环境 开发环境信息 此处一些信息是很重要的东西, 比如 App_key ...

  3. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_11.RabbitMQ研究-工作模式-路由工作模式测试

    先常见生产者 复制02的代码 先改一下交换机的名称 还需要制定routingKey.因为是两个消息 所以指定了两个routingKey 这里修改为当前指定的交换机名称 交换机和队列在绑定的时候指定我们 ...

  4. Spring Boot确保Web应用安全（登陆认证）

    Spring Boot官方提供了一个登陆认证的清晰易懂的 例子 , 我们在次以此例展开演示Spring Boot是如何实现登陆认证的. 首先我们去 https://start.spring.io/ 下 ...

  5. 【计算机视觉】MTCNN的windows-cpu配置

    前言 MTCNN是级联卷积网络,原理基本上比较清晰,只是还缺少实战,看到一个CSDN上windows的实现过程,就拿来试试. 操作过程 参考here,某些步骤会添加博主遇到的问题的解释. 第一部分:c ...

  6. CSS - clearfix清除浮动

    首先,我们来解释一下为什么要使用 clearfix(清除浮动). 通常我们在写html+css的时候,如果一个父级元素内部的子元素是浮动的(float),那么常会发生父元素不能被子元素正常撑开的情况, ...

  7. MySQL创建用户、授权、删除

    1.在MySQL中创建新用户 使用具有shell访问权限的root用户登录MySQL服务器并创建名为“rahul”的新用户.下面的命令只允许从localhost系统访问用户rahul的MySQL服务器 ...

  8. winform 更新文件上传（一）

    using Common; using DevExpress.XtraEditors; using FileModel.UpLoad; using System; using System.Colle ...

  9. iostream

    cout 星号*为默认 控制符 描 述 控制符 描 述 *dec 以十进制形式输出整数 hex 以十六进制形式输出整数 oct 以八进制形式输出整数 fixed 以普通小数形式输出浮点数 scient ...

  10. 粒子群优化算法(PSO)的基本概念

    介绍了PSO基本概念,以及和遗传算法的区别: 粒子群算法(PSO)Matlab实现(两种解法)