web前端啥是雪碧图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端啥是雪碧图相关的知识，希望对你有一定的参考价值。
雪碧图被运用在众多使用了很多小图标的网站上。
相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。
一、使用雪碧图的优点有以下几点：
将多张图片合并到一张图片中，可以减小图片的总大小。
将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。
二、雪碧图的制作与使用方法：
使用图像编辑软件如Photoshop将多张图放到同一个图层并导出。
使用自动化构建工具自动拼接合并后的图片。
引用图片时，图片地址为合并后的图片地址。
雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。
使用雪碧图的优点有以下几点：
将多张图片合并到一张图片中，可以减小图片的总大小
将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显
雪碧图的制作与使用方法：
使用图像编辑软件如Photoshop将多张图放到同一个图层并导出或使用自动化构建工具自动拼接合并后的图片
引用图片时，图片地址为合并后的图片地址，通过background-position调整背景图的位置，并通过容器的宽高共同作用，来选出所需的图片
注意：
在HTTP2中，已经不需要考虑减少请求数，故雪碧图在HTTP2中优化性能的意义已经不大
参考技术Bbackground:url(img/controls.png) no-repeat 0px -229px ;
示例代码中controls.png 上有一些小的图片 0px -229px 就是定位到所需图片啦，意思是横向不动，纵向向下229个像素，这里的(0px -229px)实际上是 background-position。
下面就是我用到的一个图片啦
从百度百科上面找到的，不知道 能不能帮助你哈。追问
那具体怎么定位来显示需要的图片，坐标怎么弄
本回答被提问者采纳web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）
参考文档：https://man.ilovefishc.com/css3/
一、基本选择器：
1通配符选择器 *
2元素选择器 element
3类选择器 .class
4id选择器 #id
5内联样式 style
二、复合选择器：
1交集选择器
element.class || element#id
2并集选择器
element1,element2,element3,...
3后代选择器
element1 element2
4子元素选择器
element1 > element2
5相邻兄弟选择器
element1 + element2
6通用兄弟选择器
element1 ~ element2
三、属性选择器：
属性选择器：可以根据元素中的属性或属性值选取元素，并指定样式
常用属性：
[attribute] 选择器用于选取带有指定属性的元素。
[attribute=value]选择器用于选择带有指定值属性的元素
四、伪类选择器
最常用的伪类选择器
1）:active 点击按下生效，不仅用于a元素，其他元素也生效。
https://man.ilovefishc.com/pageCSS3/dotActive.html
2）:hover 鼠标指针浮动在元素上面生效，不仅用于a元素，其他元素也生效。
https://man.ilovefishc.com/pageCSS3/dothover.html
3）:focus 输入框获取焦点以后生效。
https://man.ilovefishc.com/pageCSS3/dotfocus.html
4）:checked 单选框，多选框，select元素中的option 选中状态
https://man.ilovefishc.com/pageCSS3/dotChecked.html
五、子元素的伪类选择器
大排行：
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
https://man.ilovefishc.com/pageCSS3/dotfirst-child.html
:last-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
https://man.ilovefishc.com/pageCSS3/dotlast-child.html
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。(可以设置奇数，偶数)
https://man.ilovefishc.com/pageCSS3/dotnth-child-n.html
小排行：
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。
https://man.ilovefishc.com/pageCSS3/dotfirst-of-type.html
:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。
https://man.ilovefishc.com/pageCSS3/dotlast-of-type.html
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。
https://man.ilovefishc.com/pageCSS3/dotnth-of-type.html
六、否定伪类选择器
:not(selector)：从已选中的元素中剔除某些元素
https://man.ilovefishc.com/pageCSS3/dotnot.html
七、伪元素选择器
伪元素：元素的特定部分指定样式
::first-letter 选择首字母，或者以一个汉字
https://man.ilovefishc.com/pageCSS3/dotfirst-letter.html
::first-line 选定首行。
https://man.ilovefishc.com/pageCSS3/dotfirst-line.html
::before 被选元素的内容前面插入内容。
https://man.ilovefishc.com/pageCSS3/dotBefore.html
::after 被选元素的内容后面插入内容。
https://man.ilovefishc.com/pageCSS3/dotAfter.html
八、选择器优先级：
内联样式优先级 1000
id选择器优先级 100
类和伪类优先级 10
元素选择器优先级 1
通配符*优先级 0
继承来的样式 没有优先级
1当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后比较，
2但是注意，选择器的优先级计算不会超过他的最大数量级。
（比如11个元素选择器相加，也不会找过类选择器）
3如果选择器的优先级一样，则使用靠后的样式
4并集选择器的优先级是单独计算。
div,p,#p1,.hello;
5可以在样式的最后，添加一个!important,则此时该样式会获得一个最高优先级，
此时优先级比内联样式还高。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
加起来是11
*/
div>div>div>div>div>div>div>div>div>div>div
width: 100px;
height: 100px;
background-color: green;
/*
元素选择器是10
虽然10小于11，
但是上面都是元素选择器，元素选择器优先级不会超过类选择器
*/
.box11
background-color: red;
.box1
margin-top: 10px;
width: 100px;
height: 100px;
background-color: green;
/*
box2的选择器和box1一样，
但是box2靠后，所以box2生效
*/
.box2
margin-top: 10px;
width: 100px;
height: 100px;
background-color: red;
/*
并集选择器不相加,
所以这里是1
*/
div,p
color: green;
/*
这个加起来是2，所以这个生效
*/
div p
color: red;
/*
5可以在样式的最后，添加一个!important,则此时该样式会获得一个最高优先级，
此时优先级比内联样式还高。
*/
.important
width: 100px;
height: 100px;
background-color: red !important;
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="box11"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box1 box2">
</div>
<div>
<p>我是p元素</p>
</div>
<div style="background-color: green" class="important">
</div>
</body>
</html>
九、伪类选择器顺序
伪类选择器的优先级是一样的，所以后面的会覆盖前面的
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
四个伪类
:link 选择器用于选取未被访问的链接。
:visited 选择器用于选取已被访问的链接。
:hover 选择器用于选择鼠标指针浮动在上面的元素。
:active 选择器用于选择活动链接。
伪类选择器后面的把前面的覆盖掉了,状态有重叠
如果把 a:hover和a:active 放在 a:link和a:visited 的前面则会覆盖
*/
a:link
/* 绿色 */
color: green;
a:visited
/* 红色 */
color: red;
a:hover
/* 黑色 */
color: black;
a:active
/* 紫色 */
color: blueviolet;
</style>
</head>
<body>
<a href="www.baidu111.com/">访问过的</a><br />
<a href="www.baidu222.com/">未访问过的</a>
</body>
</html>
十、例子练习：CSS sprite（雪碧图）
实现功能：正常状态下是一个图片，鼠标放上去是一个图片，鼠标点击时是一张图片
第一张图片
第二张图片
第三张图片
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*
margin: 0px;
padding:0px;
.button1
display: block;
width: 200px;
height: 200px;
background-image: url(../img/play1.png);
background-repeat: no-repeat;
.button1:hover
background-image: url(../img/play2.png);
.button1:active
background-image: url(../img/play3.png);
</style>
</head>
<body>
<a class="button1" href="#"></a>
</body>
</html>
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
这个闪烁会造成一次不佳的用户体验，
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一次外部资源就需要单独发送一次请求，
但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
我们这个练习，一上来浏览器只会加载play1.png，由于hover和active的状态没有触发，所以play2.png和play3.png没有并没有加载。
当hover被触发时，浏览器才去加载play2.png
当active被触发时，浏览器才会加载play3.png
由于图片加载需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况。
为了解决该问题，可以将三张图片整合为一张图片，加载一次，就不会出现闪烁的问题了。
然后通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite雪碧图）
优点：
1.将多张图片整合为一张图片，浏览器只需要请求一次，可以同时加载多张图片，提高了访问效率和用户体验。
2.将多张图片整合为一张图片，减小了图片的总大小，提高请求速度，增加了用户体验
把三张图片合成一张图片（雪碧图）改变图片要显示的位置：
上述代码优化如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*
margin: 0px;
padding:0px;
.button1
display: block;
width: 200px;
height: 200px;
background-image: url(../img/playall.png);
background-repeat: no-repeat;
.button1:hover
background-position: -200px 0px;
.button1:active
background-position: -400px 0px;
</style>
</head>
<body>
<!--
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
这个闪烁会造成一次不佳的用户体验，
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一次外部资源就需要单独发送一次请求，
但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
我们这个练习，一上来浏览器只会加载play1.png，由于hover和active的状态没有触发，所以play2.png和play3.png没有并没有加载。
当hover被触发时，浏览器才去加载play2.png
当active被触发时，浏览器才会加载play3.png
由于图片加载需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况。
为了解决该问题，可以将三张图片整合为一张图片，加载一次，就不会出现闪烁的问题了。
然后通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite雪碧图）
优点：
1.将多张图片整合为一张图片，浏览器只需要请求一次，可以同时加载多张图片，提高了访问效率和用户体验。
2.将多张图片整合为一张图片，减小了图片的总大小，提高请求速度，增加了用户体验
-->
<a class="button1" href="#"></a>
</body>
</html>
以上是关于web前端啥是雪碧图的主要内容，如果未能解决你的问题，请参考以下文章