一张图片中多个图标如何通过CSS定位显示？

已于 2022-01-19 21:49:10 修改
阅读量1.2k 收藏 2
点赞数
分类专栏： 前端 文章标签： css css3 前端
于 2022-01-19 21:48:16 首次发布
hjhcos
本文链接：https://blog.csdn.net/hjh_cos/article/details/122502818
版权

答案就是利用CSS Sprites技术，即采用background-position定位一张大图里面的小图标。这个有个弊端就是如何去解决不同机子的适配问题，其实采用这项技术的网站并不是很多，那种多张固定颜色背景可能使用到。我记得以前B站的图标就用到这项技术，现在基本使用svg这种便于操作的。

参考文献

1. 在 CSS 中实现图像合并

hjhcos
关注
专栏目录
浅谈css中图片定位之所有图标放在一张图上
09-25
本文为大家介绍下如何将所有图标放在一张图上，这里需要学习下css中的图片定位，下面有个不不错的示例，大家可以参考下
css多图标在一张图内如何正确显示它们
yangyangdt的博客
12-01 847
有时候图标都会给在一张图内，我们该怎么利用这张图将图标放在所需位置呢，请看看我是怎么做的
多张背景图片定位，定大小同时显示
jhhuang4836的专栏
07-02 368
一个DIV可以显示多少个背景图片，在以前答案是肯定的，只能显示一个。但是在CSS3的出现改变了这一现状，可以显示多个背景图片。不管可以显示多个，就连这个背景的在什么位置显示（定位），以及显示的大小都可以设置。下面我们来看个例子： <div id="canvas"></div>   $('#canvas').css("background","url('../View...
css中背景图和小图标定位和优化
weixin_42220130的博客
03-22 433
学习的过程是应该不断探索和总结的。以我为例，我认为我是一个相对愚笨，有没有很强的自制力，学习也爱耍些”小聪明“，总感觉自己懂了，但是每次一到自己进行书写的时候，又总是模模糊糊。我做了以下几件事我强迫自己慢下来，不必追求进度，不去想自己的未来、自己能不能找到工作（当你处于忧虑之中，就会无形的耗费自己的精力)。强迫自己写博客文章，遇到不懂的就及时总结和梳理自己的疑惑。要有个大致的方向，避免一个知识点钻牛角尖到底，忽略了自己本来的方向。
将多张图整合到一张大图中，再用css定位技术
weixin_33830216的博客
07-26 357
2019独角兽企业重金招聘Python工程师标准>>> ...
css sprites技术将多个背景集成到一个png图片上css定位
09-22
它将多个小图片合并到一张大图（通常为PNG格式）上，然后通过CSS的`background-image`属性设置这张大图，并利用`background-position`来定位显示其中的某个小图片。 实现CSS Sprites的基本步骤如下： 1. **整合...
css sprites把很多小图集成在一张图片上
12-07
CSS Sprites，也称为精灵图或雪碧图，是一种网页图像优化技术，它将多个小图合并到一张大图中，以减少网络请求次数，从而加快网页加载速度。这一技术在SEO（搜索引擎优化）中尤为重要，因为它能提高网页的加载效率，...
CSS background 控制显示图片的一部分
09-25
假设我们有一张包含多个垂直排列的字母（如A、B、C）的图片，每个字母占据20px的高度。我们可以通过设置不同的`background-position`值来显示所需的字母。例如： ```css .mar_wordA { background: url("../images/...
网页中多个图标在一张图片上，使用css将各图标显示
weixin_34102807的博客
12-13 548
现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。 如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是4~8个，那么图标显示过慢或者超时的情况就会发生。 当然了，像采用CDN，或者按照浏览器的并发数对图片文件进行域名分散存储处理也是再好不过的，但不是都有这样的条件。 ...
Selenium之css怎么实现元素定位？
weixin_56502375的博客
11-19 1000
世界上最远的距离大概就是明明看到一个页面元素站在那里，但是我却定位不到！！
在CSS中怎样从一个png图片里取出小图标
jsnjzgb的博客
10-02 2558
图片左上角为原点,往右往下均为负值 &nbsp已看 &nbsp未看 .mailicon {display: inline-block;width:16px;height:16px;line-height:16px;background:url(images/mail.png) no-repeat;} .see{background-position:-48px -16px} 用了第
Vue进阶（四十四）：vue 图片加载完成事件
IT全栈 华强工作室
04-09 9612
需求：当页面需要处理图片渲染完毕的时候，对图片进行加水印操作。 想到了image的onload事件，当图片加载完成之后再处理图片。 原生js <img "get(this)" src="..." style="display: none"/> <script type="text/javascript"> function get(ts){ ts.style.d...
有趣的 CSS 图标整合技术！sprites精灵图，css贴图定位
最新发布
u013179804的博客
04-29 994
图像精灵（Sprite），也称为雪碧图、CSS 雪碧、CSS Sprite，是一种 CSS 图像合成技术，它将多个小图标或图片合并到一个单独的图像文件中，然后通过 CSS 的背景定位属性来显示需要的部分。图像精灵主要用于解决 img 标签在加载多张小图标或图片时产生的 HTTP 请求过多、页面加载速度慢等问题。比如，wyy音乐的这块，用的就是精灵图。将多个小图标或图片合并到一个文件中，减少了浏览器向服务器发送的 HTTP 请求次数，提高了页面加载速度。
css如何定位大图中的小图标
u010046887的专栏
03-30 4754
Document div {width:62px;height:67px;}//定义div的宽高 div{background-image:url(img/pic.jpg);}//定义背景图片 div.pic{background-position:0px 0px;}//图片的起始位置 div.pic:hover{background-position:-77px 0px ;}//图片偏移
Css抠图（大图中截取一个小图来显示）
HPUGIS的博客
07-17 3992
今天上午扣图扣了一上午，写了一个仿天地图的工具栏，无奈我这这个审美眼光感觉有点问题，做出来的老感觉别扭具体那点出问题了又说i不出来，先放张图看看效果： 上图中小图标就是自己一点一点抠出来的： 原图长这样的： 就是这样的一张大图里面有许多的小图 一、需要的css 1、background-image: url(); 背景图片的地址 2、background-position ...
css 图片上使用position定位图片，缩小屏幕 图片会跑（已解决）
蓝胖子的博客
03-14 1378
css 图片上使用position定位图片，缩小屏幕 图片会跑（已解决）
css中图片定位之所有图标放在一张图上
jQuery,CSS,Asp.net及前端开放问题汇总
06-09 1764
如今做网页为了使网站丰富多彩，富于表现力，往往需要应用大量的图片/图标。如何处理这些图片，使其尽量不影响网页载入，解析等速度，是一个不大不小的问题。如果你的网站用各种图标图案装饰的靓丽无比，但是需要等待较长的时间加载，那么相信很多用户会等不及而离开。尽量将图片做的小些，可能是大部分人选择的解决之道。但是100张1kb的图片加载与一张100kb的图片加载，这之间又是不同的，这涉及到网站服务器的同时连
CSS_css裁剪，定位显示图片中某个位置
小歪博客
06-30 1024
CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。top right bottom left分别指最终剪裁可见区域的上边，右边，下边与左边。而所有的数值都表示位置，且是相对于原始元素的左上角而言的。于是...
html中图片只是一个小图标,如何用css显示一个图片中多个小图标？
weixin_33344572的博客
06-04 1035
去搜一下css中background的用法，一切尽在其中。最重要的一点是你要了解背景图片在控制项中显示的起始位置，控制项的高度，宽度。以下是简要分析，你还要实践一下才能掌握真谛：对一个宽度40，高度30的div设定一个背景，而背景图片是一张很多小图片的组合。这里隐含了一个条件，就是小图片的宽度和高度和小图片的间隙要大于等于div的设置，原因：当你设定背景图片的起始位置时，如果小图片相对div太小，...
"提高网页加载速度的CSS Sprites技巧与背景图片定位
通过将多个小图片合并成一张大图，并通过CSS样式表中的背景图片定位来实现图片的显示和定位，可以减少网络请求次数，减轻服务器负载，提高网页加载速度。在使用CSS Sprites时，需要注意合并图片的尺寸、背景颜色和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hjhcos

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值