精灵图写法方法

随风去山海

已于 2023-07-22 11:24:47 修改

阅读量65

点赞数

文章标签： css javascript css3

于 2023-07-17 11:33:43 首次发布

本文链接：https://blog.csdn.net/yt0601/article/details/131762830

版权

<head>

<title>Document</title>

<style>

div.item {

width: 67px;

height: 67px;

background-image: url(./img2/jd-sprites.png);

/* 注意显示图片时，大图的偏移值是正值还是负值 */

background-position: -160px -142px;

}

.first {

width: 200px;

height: 200px;

background-image: url(./img2/喜怒哀乐.webp);

background-position: -200px -200px;

}

.second {

height: 200px;

width: 200px;

/* background: pink; */

/* 当设置背景时有方向和大小时，书写：方向/大小

background: url(./img/小图.webp) no-repeat 100px 100px/center; */

background: url(./img/小图.webp) no-repeat center/100%;

}

</style>

</head>

<body>

<!--

精灵图又称雪碧图，是将小图标集中于一张图片上

优点:

①将多个图片整合为一张图片，浏览器只需要发送一次请求，就可以同时加载多个图片，提高访问效率，提高用户体验

②将多个图片整合为一张图片，减少图片的总大小，提高请求的速度，增加了用户体验

-->

</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

随风去山海

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

按键精灵打怪学习-多窗口多线程后台判断人物、宠物血量和宠物快乐度

空名先生

06-29

5880

专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等） -- 天龙八部

定位、间隙解决、精灵图、BFC、表单、兼容问题、CSS hack、布局

tian_98的博客

12-01

402

day 01 定位：使标签相对于某个标签重新定义一个位置，可以相对标签本身的位置，父标签或者浏览器窗口 position：定位值： static 默认 relative 相对定位相对于元素本身的位置定位不脱离文档流，本身的位置会保留 absoluted 绝对定位相对于有定位属性的父元素，如果父元素没有定位会一层层向外寻找，直到最大的父元素（body）为止子绝父相脱离文档流，不占位 fixed 固定定位相对于浏览器窗口定位脱离文档流偏移量：top right b

参与评论您还未登录，请先登录后发表或查看评论

关于精灵图

Twilight's Blog

02-07

9176

之前就发现一些网站吧所有的小图标拼接在一张图片中，但是一直不知道这是怎么做到的，今天特地了解了一下，才知道这种用法叫做精灵图。他的优点是可以减少浏览器请求的次数，把所有图片拼接在一张图中就只需要请求一次，当浏览器需要用到图片时再从大图片中解析。这样可以加快访问的次数。先来看看效果图：拼接的图片：他的原理是，先规定好每个小图标的大小，创建一个和小图标大小相同的容器，再通过移动背景图片的方法将大图中

移动端精灵图写法

qq_36939013的博客

11-22

275

.sou{ position: absolute; top: 8px; left: 50px; width: 18px; height: 15px; background-color: pink; background: url(../images/jd-sprites.png) no-repeat -81px 0; background-size: 200px auto; }

CSS精灵写法

郭晓湉

12-08

1900

无标题文档.div1{ width:420px;}.div1 li { list-style: none; float:left; border:1px solid #EAF3FA; background:#FBFCFF; margin:10px; width:120px; height:40px; line-height:40px; padding-left:10px;}.div span{pa

移动端布局基础，flex布局，百分比布局，以及多倍精灵图的写法

jilihui2003的博客

12-07

287

pc端的网页布局基础学习结束了，终于来到移动端基础学习。通过几天的学习，其实发现pc端的代码书写和移动端的差距不大，只是在一些适配问题上，由于移动端的屏幕大小和分辨率有太多种类，导致对于页面的一些布局不可以用我们的px固定死，要让它进行自动适配，来让我们不同的手机上的页面显示都显得正常，让用户有着更好的视觉体验。 1：首先对于移动端我们要先对视口进行设置 <meta name="viewport" content="width=device-width,userscalable=no,init

HTML入门学习笔记--CSS背景和精灵图(5)

qq_孤小狼的博客

01-11

2103

33-背景颜色1.如何设置标签的背景颜色?在CSS中有一个background-color:属性, 就是专门用来设置标签的背景颜色的取值: 具体单词 rgb rgba 十六进制快捷键:bc background-color: #fff;34-背景图片1.如何设置背景图片?在CSS中有一个叫做background-image: url();的属性, 就是专门用于

css中图片背景以及URL的介绍以及什么是css精灵

zifeiyu3697的博客

03-07

2489

一.图片背景 background-image 定义背景图片,可定义多背景 background-repeat 定义背景图片的显示方式 repeat，图片重复垂直水平都重复 repeat-x，图片横向重复 repeat-y，图片纵向重复 no-repeat，图片不重复注:添加多张图片时,图片的显示顺序按照图片先后引入的顺序. URL-统一资源定位器 background-position 定义背景图片的位置直接使用两个定位单词，例:background-position(位.

CSS的背景（背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定（图片附着），背景复合写法）

shy的博客

03-09

3361

CSS的背景通过 CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等、背景颜色 background-color 定义元素的背景颜色 <style> a { background-color: #55585a; } </style> 元素背景颜色默认值是 transparent（透明）背景图片 background-image 定义元素的背景图片 <styl

CSS——精灵图

热门推荐

weixin_45331887的博客

05-06

2万+

CSS学习笔记目录一、什么是精灵图？二、精灵图的优点三、精灵图的基本用法1、打开ps导入精灵图2、测量字母的大小及坐标3、效果图4、代码实现总结一、什么是精灵图？所谓精灵图就是图片拼合技术，它就是把多张小图合成一张大图，通过css中的background-position属性，显示精灵图中某一个小图标。精灵图如下：二、精灵图的优点采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。使用精灵图可以有效减少服务

如何使用精灵图

minimorezhd的博客

11-21

793

刚刚带大家学习了一下二级菜单的写法，这次我们来聊聊精灵图的使用，因为我想大家在仿写其他页面的时候总会遇到各种各样的小图标，很多小图标都能找到，这里推荐大家去搜 -阿里矢量图-这是阿里的矢量图库，里面的矢量图基本能满足大部分人的需求，但是一些奇奇怪怪的小图标确实是找不到，这个时候推荐大家使用精灵图，精灵图的对于很多大项目来说是很友好的，为什么呢，因为精灵图只需要访问一次，不需要占用服务器端太多的内存。因为精灵图一般位于导航栏里面，所以我们还是要先见一个框出来，也是差不多1200px, 浏览器效果如下然后

精灵图（css sprites）

鹿蹊zz的博客

05-10

2970

目录一、什么是精灵图？二、精灵图的优点三、精灵图的缺点四、精灵图的基本用法五、 background-position 六、渐变 1、线性渐变 2、径向渐变一、什么是精灵图？所谓精灵图就是图片拼合技术，把很多的小图片合并到一张较大的图片里，通过css中的background-position属性，显示精灵图中某一个小图标。二、精灵图的优点在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，.....

精灵图

前端

08-22

2万+

精灵图 什么是精灵图： css精灵(CSS sprites),是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中应用的原因： 1.减少对浏览器的请求次数，避免网页的延迟 2.方便小图标的统一管理 精灵图的制作： 1.软件：ps 2.制作方法：新建透明图层添加参考线将画布划分，将小图标放入划分好的格子中 精灵图的使用： css精灵图需要配...

精灵图（雪碧图）的用法

Jackson_ji的博客

05-30

1865

之前一听到别人说，雪碧图（精灵图）感觉这逼格很高啊，之后，自己看了看，做个demo用雪碧图之后，优点还是有的，减少了浏览器对服务器的请求，提高了加载的速度，也易于后期的修改，维护.box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8,.box9 { float: left; width:100px; height: 100px; backgrou...

css进阶：精灵图的使用、实现用精灵图拼出名字

weixin_49555741的博客

03-23

2908

1.精灵图的用途为了有效地减少服务器接收和请求的次数，提高网页的加载速度，因此产生了CSS精灵技术（也称CSS Sprites、CSS雪碧）核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只要一次请求就可以了 2. 精灵图（sprites）的使用 2.1 原理使用精灵图核心：精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中这个大图片也称sprites精灵图或者雪碧图移动背景图位置，此时可以background-position 移动的

CSS高级技巧：精灵图、字体图标、三角形制作、布局技巧

weixin_42044763的博客

05-18

2796

一、精灵图 精灵图是啥捏，其实说白了就是一个合并的图层，把一个网页里的所有小图标合并成一个大的图，然后某个位置要用某个图的时候，先把这个大的图调用过来，通过挪动位置来定位到里面的小图，比如王者荣耀官网这个图：精灵技术的目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。使用代码试一试：先用PS切图工具量一下宽高和xy轴的偏移距离，然后再去定义盒子 .box1 { width: 63px; height: 59px;

cplusplus 静态方法写法

05-05

在 C++ 中，静态方法可以使用 `static` 关键字进行声明和定义，在类中使用 `类名::方法名` 的方式进行调用。以下是一个静态方法的示例代码： ```cpp class MyClass { public: static void myStaticMethod() { // ...