首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS Sprites(精灵图)

CSS Sprites(精灵图)

作者头像
切图仔
发布于 2022-09-08 07:25:07
发布于 2022-09-08 07:25:07
1.1K00
代码可运行
举报
文章被收录于专栏:生如夏花绚烂生如夏花绚烂
运行总次数:0
代码可运行

引入

当用户访问网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而一个网页中往往会有很多小背景图片作为修饰,当网页背景图像过多时,服务器就会频繁的接收发送请求,这会大大降低页面的加载速度,为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度,就出现了css精灵技术 (CSS Sprites)

CSS精灵并不是很高深的技术,CSS精灵是一种处理网页背景图像的方式,它将一个页面涉及到的所有背景图像都集中到一张大图中,然后当客户端请求服务器时,直接将这个大图发送给客户端,这样当用户访问该页面时,只需向服务器发送一次请求,网页中的背景图像即可全部显示出来,通常情况这个由很多小背景图像合成的大图被称为精灵图

使用精灵图

通过定义我们知道,css精灵其实就是将网页中的一些背景图像整合到一张大图中,我们需使用精灵图里面的某个小图片就需要通过css的background-image(引入精灵图),background-repeat(指定不重复), background-position(确定小图在精灵图中的位置,必须精确定位) 接下来看一下一些大型网页是否使用了精灵图 如淘宝页面

通过审查元素,查看右边小图标是否使用了精灵图。 点击游戏

查看Style

我们发现”游戏“盒子使用了background-position的属性,我们都知道这个属性是设置背景图的位置的,他使用的是哪个背景图呢?在观察html代码,发现他还有一个tbh-icon的类,通过Style我们可以看到tbh-icon引入了一张背景图片,打开背景图片链接

如下,一张图片包含了很多个小背景图,这便是【精灵图】

很多大型网页都使用了这种技术,所以我们还是有学习的必要 根据淘宝的精灵图我们试着来使用一下

假设我们要使用“飞猪”图片,上面提到我们要使用精灵图的小背景图 就需要通过background-postion设置精确位置,以“飞猪为例”。 1.将精灵图用ps打开

为了避免改变精灵图的位置,我们第一次打开时需将图层锁定 通过选取工具,选取我们需要的图片得到其大小位置信息,图片的信息在“窗口”---“信息”。 将鼠标置于选取图片的左上角

如图得到图片的大小及位置信息 在html文件中

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
```php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div{
            background: url(icon.png) no-repeat;
            //引入精灵图
        }
        div:first-child{
            width:49px;
            height:49px;
            background-position: 0 -176px;
            
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

效果图

制作精灵图

制作精灵图就是将小图标放图一个大的背景中即可,这里就不一一阐述,精灵图制作遵循一下原则

1.精灵图必须为透明背景

2.精灵图中个各个小图应该有一定的间距

3.精灵图底部应该预留位置方便以后添加

4.精灵图存储为png格式

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-05-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧?
今天学习css精灵图技术,并且通过用它拼接自己的英文名字,拿起小本本记好了哦!
全栈程序员站长
2022/09/01
7020
【说站】css精灵图技术是什么
1、将页面所涉及的所有零星背景图像集中到大图中,然后将大图用于网页。用户访问页面时,只需向服务器发送一次请求。
很酷的站长
2022/11/24
3290
【说站】css精灵图技术是什么
【CSS——Sprite Sheet 精灵图动画】西游记之西天取经(蓝桥杯真题-2419)【合集】
在浏览器中预览 index.html 页面初始化后动画只动一次就会停下来。页面效果如下:
Rossy Yan
2025/02/08
1780
【CSS——Sprite Sheet 精灵图动画】西游记之西天取经(蓝桥杯真题-2419)【合集】
背景图片的精灵图的使用
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/132972.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/28
4410
从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门
将元素高度设置为0, 使用内边距将盒子撑开,给盒子使用overflow:hidden; 将文字隐藏。
Daotin
2018/08/31
1.1K0
从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门
CSS精灵技术(sprite)
当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。
星辰_大海
2020/09/30
1.2K0
关于精灵图
之前就发现一些网站把所有的小图标拼接在一张图片中,但是一直不知道这是怎么做到的,今天特地了解了一下,才知道这种用法叫做精灵图。他的优点是可以减少浏览器请求的次数,把所有图片拼接在一张图中就只需要请求一次,当浏览器需要用到图片时再从大图片中解析。这样可以加快访问的次数。先来看看效果图:
全栈程序员站长
2022/09/02
4770
CSS笔记(16)
CSS布局总算是告一段落啦,现在开始学习一些CSS的高级技巧,能坚持到这里真不容易.
y191024
2022/09/20
6960
CSS笔记(16)
CSS-精灵图片的使用(从一张图片中截图指定位置图标)
在网页中,我们可以看到有很多的小图标,比如微博上的登录位置有很多这样的小图标。因为浏览器显示网页的所有内容都需要从我们自己的服务器进行下载,如果将这些图标分别存在服务器上,那么当需要显示的时候将会发出很多次请求–>响应–>下载,这样一来将会消耗大量的时间来下载这些小图标
全栈程序员站长
2022/08/22
1.6K0
CSS-精灵图片的使用(从一张图片中截图指定位置图标)
第9天:CSS精灵图
“CSS精灵”,英语css sprite,所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
半指温柔乐
2018/09/11
1K0
第9天:CSS精灵图
【CSS3】css开篇基础(5)
轻量级:一个图标字体比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少了服务器的请求
E绵绵
2024/10/27
2470
【CSS3】css开篇基础(5)
【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | CSS 精灵技术简介 | 代码示例 )
用户访问网站时 , 网页中每张图片都要经过单独请求 , 服务器一次只能传递一张图片给用户浏览器 ,
韩曙亮
2023/04/24
9580
【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | CSS 精灵技术简介 | 代码示例 )
CSS进阶-CSS Sprites技术
在网页设计与开发领域,提高页面加载速度和优化用户体验是永恒的主题。CSS Sprites(精灵图)作为一种经典的图片合并技术,通过减少HTTP请求次数,有效提升了网站性能。本文将深入浅出地探讨CSS Sprites的核心概念、常见问题、易错点及规避策略,并通过实例加深理解。
Jimaks
2024/06/15
3140
css中精灵图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-CSS精灵图</title> <style> .box{ width: 86px; height: 28px; background-image: url(images/weibo.png); background-positio
贵哥的编程之路
2020/10/28
5850
CSS精灵图(sprite)
说到精灵图(雪碧图),大家肯定和我一样觉得这个很新鲜。在学习了有关精灵图(雪碧图)的一些知识后,就来和大家讨论一下,我个人对精灵图(雪碧图)的一些理解和实现方法吧。
全栈程序员站长
2022/06/28
9230
CSS精灵图(sprite)
CSS 从大图中选取部分区域作为目标图标
图片素材如下(大小:137px * 264px),图中从上到下,连续存放了两张100px * 100px的图
授客
2019/08/21
1.2K0
CSS 从大图中选取部分区域作为目标图标
CSS学习笔记(基础篇)
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
Daotin
2018/08/31
4.8K0
CSS学习笔记(基础篇)
9.背景样式-CSS基础
一、背景样式 在CSS中,背景样式包括两个方面:背景颜色、背景图片。 在Web2.0 时代,对于元素的背景样式,我们都是使用CSS属性来实现。但在Web1.0时代,都是使用background或者 bgcolor这两个HTML属性(不是CSS属性)来为元素定义背景颜色或背景图片。 1.常用背景样式属性 属性 说明 background-color 定义背景颜色。 background-image 定义背景图片地址。 background-repeat 定义背景图片重复。 background-pos
见贤思齊
2020/10/29
1.1K0
9.背景样式-CSS基础
html精灵图跟img标签,css精灵图怎么使用?
什么是css精灵图(sprite)?css精灵图怎么使用?下面本篇文章就来给大家介绍一下css精灵图的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
全栈程序员站长
2022/08/23
2.2K0
html精灵图跟img标签,css精灵图怎么使用?
重学---css背景与精灵图
注意一下,rgba代表了红色 绿色 蓝色 透明哈(0-1),0代表完全透明,1代表原本模样.
贵哥的编程之路
2020/11/03
4810
重学---css背景与精灵图
相关推荐
我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验