五、pink老师的学习笔记——CSS精灵技术(sprite)

5. CSS精灵技术(sprite) 重点

5.1 为什么需要精灵技术

在这里插入图片描述

图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。

然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。

pink老师告诉你我们为什么需要精灵技术:

为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。

出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。

5.2 精灵技术讲解

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

在这里插入图片描述

这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。

我们需要使用CSS的

  • background-image、
  • background-repeat
  • background-position属性进行背景定位,
  • 其中最关键的是使用background-position 属性精确地定位。
  • 在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

5.3 精灵技术使用的核心总结

首先我们知道,css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。

  1. 精确测量,每个小背景图片的大小和 位置。
  2. 给盒子指定小背景图片时, 背景定位基本都是 负值

5.4 制作精灵图(了解)

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),那我们要做的,就是把小图拼合成一张大图。

大部分情况下,精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们可以横向摆放也可以纵向摆放,但是每个图片之间留有适当的空隙
在我们精灵图的最低端,留一片空隙,方便我们以后添加其他精灵图。

结束语: 小公司,背景图片很少的情况,没有必要使用精灵技术,维护成本太高。 如果是背景图片比较多,可以建议使用精灵技术。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471320.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Javadoc的Html文件传输chm

Javadoc的Html文件转chm 工具下载地址:http://msdn.microsoft.com/en-us/library/ms669985.aspx 两篇相关文章: MyEclipse生成javadoc文档http://blog.csdn.net/kakarot5/article/details/40683837 Java凝视总结http://blog.csd…

六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用

7. 拓展 7.1 margin负值之美 1). 负边距定位:水平垂直居中 咱们前面讲过, 一个绝对定位的盒子, 利用 父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中。 2). 压住盒子相邻边框 上图第…

LeetCode 2136. 全部开花的最早一天(贪心)

文章目录1. 题目2. 解题1. 题目 你有 n 枚花的种子。每枚种子必须先种下,才能开始生长、开花。播种需要时间,种子的生长也是如此。给你两个下标从 0 开始的整数数组 plantTime 和 growTime ,每个数组的长度都是 n : plantTime[i…

html悬浮窗口退出,网页中可关闭的漂浮窗口实现

注释部分为广告的左右调节,可以自行设定网页中可关闭的漂浮窗口关闭点击这里,关闭广告!!!var bodyfrm ( document.compatMode.toLowerCase()"css1compat" ) ? document.documentElement : document.body;v…

pycharm profile对函数调用效率进行测试

假设有如下代码: def func1():for i in range(1000):print("i love python")def func2():for i in range(10):print("i love c")func3()def func3():for i in range(100):print("i love java")def main():func1()func2()if __name__…

八、pink老师的学习笔记—— CSS用户界面样式(鼠标样式、轮廓线、防止拖拽文本域)

2. CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验。 更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究)表单轮廓等。防止表单域拖拽 2.1 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采…

LeetCode 2138. 将字符串拆分为若干长度为 k 的组

文章目录1. 题目2. 解题1. 题目 字符串 s 可以按下述步骤划分为若干长度为 k 的组: 第一组由字符串中的前 k 个字符组成,第二组由接下来的 k 个字符串组成,依此类推。每个字符都能够成为 某一个 组的一部分。对于最后一组,如果字…

九、一篇文章帮助你读懂CSS属性:vertical-align 垂直对齐

3. vertical-align 垂直对齐 有宽度的块级元素居中对齐,是margin: 0 auto;让文字居中对齐,是 text-align: center; 但是我们从来没有讲过有垂直居中的属性。 vertical-align 垂直对齐,它只针对于行内元素或者行内块元素, verti…

LeetCode 2139. 得到目标值的最少行动次数(贪心)

文章目录1. 题目2. 解题1. 题目 你正在玩一个整数游戏。从整数 1 开始,期望得到整数 target 。 在一次行动中,你可以做下述两种操作之一: 递增,将当前整数的值加 1(即, x x 1)。加倍&#…

十、CSS三行代码实现 溢出的文字省略号显示(white-space: nowrap;overflow: hidden;text-overflow: ellipsis;)

4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容 white-space:normal ;默认处理方式white-space:nowrap ; 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对…

LAMP环境安装与apache配置

可以写在一起也可以分开写 sudo apt-get install apache2 php5 sudo apt-get install libapache2-mod-php5 php5-mysql 修改apache2.conf AddType 是与类型表相关的,描述的是扩展名与文件类型之间的关系,如:AddType application/x-x509-ca-ce…

LeetCode 2140. 解决智力问题(动态规划)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的二维整数数组 questions ,其中 questions[i] [pointsi, brainpoweri] 。 这个数组表示一场考试里的一系列题目,你需要 按顺序 (也就是从问题 0 开始依次解决)&#xff0…

计算机的起源和历史英语作文,端午节的由来和历史英语作文

端午节的由来和历史英语作文端午节与春节和中秋节并列为中国三大节日。下面是小编分享给大家的端午节的由来和历史英语作文,希望能给您带来帮助!端午节的由来和历史英语作文1The Dragon Boat Festival is a lunar holiday, occurring on the fifth day o…

LeetCode 2141. 同时运行 N 台电脑的最长时间(二分查找)

文章目录1. 题目2. 解题1. 题目 你有 n 台电脑。给你整数 n 和一个下标从 0 开始的整数数组 batteries ,其中第 i 个电池可以让一台电脑 运行 batteries[i] 分钟。 你想使用这些电池让 全部 n 台电脑 同时 运行。 一开始,你可以给每台电脑连接 至多一个…

十二、HTML5新增标签特性详解(audio、video、input)

HTML5 第一天 一、什么是 HTML5 HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念: 是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一…

联想新电脑桌面没有计算机,联想电脑没有wifi图标不见了怎么办

1.联想笔记本电脑WiFi图标不见了,怎么回事吧,试了很多方法一、无线网卡开关未打开;1、查看周边有没有手动百机械开关,一般在前面板,上面标有无线符号。2、按一下Fn无线信号键(度F几中的一个)找打无线WIFI3、打开控制机板,右上角查…

十三、CSS 3新特性详解(一)——属性、结构伪类、伪元素选择器,nth-child与nth-of-type区别,2D rotate,calc函数、滤镜filter、过渡transition

七、CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展、新增的样式 CSS3 发展现状 移动端支持优于 PC 端CSS3 目前还草案,在不断改进中CSS3 相对 H5,应用非常广泛 属性选择器列表 属性选择器代码演示 (1)E[att] 选择具有…

信息的表示和处理

文章目录1. 信息存储2. 整数的表示learn from 《深入理解计算机系统》 1. 信息存储 大多数计算机,一字节(最小的寻址单元) byte 8 bits 位 C语言中一个指针的值(无论它指向一个整数、一个结构或是某个其他程序对象)…

学硕计算机考296算高分么,考研总分是多少算高分?考研340分是什么水平?

原标题:考研总分是多少算高分?考研340分是什么水平?每个考研的学生都想考一个高分,分数越高代表录取的希望越大,但是考研达到多少分算高分呢?有没有衡量考研分数的标准呢?小编为大家整理了关于考研总分高分相关的相关信息,一起…

十四、CSS 3新特性详解(二)——2D转换(transform)、动画(animation)、动画序列

HTML5 第二天 一、rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤&#xff1a; 给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{transform: rotate(0deg); }二、三角 <!DOCTYPE html&…