五、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…

html校园首页设计说明范文,网页设计作品设计说明-必看请相互转告

width:895px;height:130px;margin:auto;}#middle_box{width:895px;height:278px;clear:both;margin:auto;background:url(images/middle_bg.jpg) no-repeat center;}#footer{width:895px;height:48px;margin:auto;color:#508aa1;border-top:1px #b2bbbb dashed;}六、作品设计心…

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

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

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

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

leetcode Excel Sheet Column Number

题目连接 https://leetcode.com/problems/excel-sheet-column-number/ Excel Sheet Column Number Description Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, return its corresponding column number. For example: A …

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 设置或检索在对象上移动的鼠标指针采…

SequoiaDB 系列之六 :源码分析之coord节点

好久不见。 在上一篇SequoiaDB 系列之五 :源码分析之main函数,有讲述进程开始运行时,会根据自身的角色,来初始化不同的CB(控制块,control block)。 在之前的一篇SequoiaDB 系列之四 &#x…

html导航教程视频,导航_HTML+CSS前端基础知识教程_腾讯视频

更多资料源码请加3252897743第1天 html 1、HTTP协议 2、html是纯文本3、html骨架4、DTD文档类型5、head标签6、body标签7、html基本语法8、h系列的标签9、p标签10、img标签11、a标签12、div和span含义第2天 html1、无序列表2、有序列表3、定义列表6、表格基础7、合并单元格…

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…

计算机用户登录,计算机术语:密码、用户、登录

下面是日语计算机术语,育路教育网特别为您搜集整理,内容如下:パスワード:密码,来源自英文“password”。例:パスワードを入力する。输入密码。画面から取得されたパスワードはテーブルに格納します。从画面…

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

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

jquery选中以什么开头的元素

$("[id^percent]").size()^:表示以什么开头$:表示以什么结尾~:表示包含什么id:表示按id选择 转载于:https://www.cnblogs.com/sprinng/p/5044488.html

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

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

html 缩略图点击预览,jQuery图片相册点击缩略图弹出大图预览特效

js代码var img_index 0;var img_src "";$(function() {//计算居中位置var mg_top ((parseInt($(window).height()) - parseInt($(".photo-div").height())) / 2);$(".photo-div").css({"margin-top": "" mg_top "…

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…

十一、CSS初始化详解

CSS初始化 不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容性,我们需要对CSS初始化。 简单理解:CSS初始化是指重设浏览器的样式。(也称为CSS reset) 每个…