从单个 png 图像中获取图标

2024-01-09

到目前为止我已经见过很多次了,但我自己从未使用过。有人可以解释一下如何从这个单一的 png 图像中获取特定的图标图片,例如我使用 css 用红色选择的图标...


它被称作。它用于减少http请求。基本上所有图标都放置在单个画布上并用作background-image属性,然后使用 CSS 进行映射background-position财产,例如

.icon1 {
   background-image: url('YOUR_URL_HERE');
   background-position: 10px 10px; /* X and Y */
   height: 30px;
   width: 30px;
}

Demo http://jsfiddle.net/T2EtY/

简而言之,只需为您的元素定义一个固定的高度/宽度,然后使用映射画布background-position财产。因此,如果页面上有 100 个小图标图像,它将向服务器发出 100 个请求,因此为了提高性能,使用了 CSS Sprites。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从单个 png 图像中获取图标 的相关文章

随机推荐

  • 类型“Observable”上不存在属性“switchMap”

    当尝试将 switchMap 运算符应用于我的 Observable 时 我收到以下错误消息 类型 Observable 上不存在属性 switchMap 我目前使用 rxjs 版本 5 5 2 在我的组件中 我将其导入如下 import
  • Android 避免缓存

    http client DefaultHttpClient httpClient new DefaultHttpClient HttpEntity httpEntity null HttpResponse httpResponse null
  • Mono 和 C# IOCP:这是一个好主意吗?

    我正在将 C 应用程序移植到在其服务器上使用 IOCP 的 C mono 可以像 windows 一样处理 IOCP 吗 我会获得与 C 相当的性能还是应该尝试其他方法 thanks IOCP 的主要开销是 IO 而不是语言 你should
  • 禁用统计/分析 Javascript

    我的免费虚拟主机将分析 javascript 附加到所有 PHP 和 HTML 文件中 这很好 除了我使用 nuSoap 为我正在处理的 Web 服务创建 WSDL 文件 我的该死的主机将其添加 到我的 php 生成的 WSDL 文件中 有
  • 如何绘制“非”彩色文本?

    我正在寻找一种用反转颜色绘制文本的方法 对于形状 我们有TPenMode可以设置为pmNot 但我们不能对文本执行此操作 我该怎么做呢 这是这样做的 procedure DrawTextNOT const hDC HDC const Fon
  • 这种比较/排名算法如何命名?

    我见过一些网站 它们从列表中随机显示两个项目 用户选择他们喜欢的一项 然后根据用户偏好的结果 为整个数据集生成排名 有谁知道这个排名算法叫什么以及它是如何工作的 谢谢 我相信你指的是ELO评级系统 http en wikipedia org
  • socket.io 仅将数据包发送给发送者

    我还没有弄清楚如何使用 socket io 直接响应发送者 我了解到 io sockets emit 发送给所有客户端 但我不会将信息发送回发送者 code socket on login function data db users fi
  • Eclipse 中默认显示 CVS 注释

    在 Eclipse 中 您可以通过从上下文菜单中选择 团队 gt 显示注释 来显示文件的 CVS 注释 哪个用户更改了提交中的哪一行 但是 我想默认为 CVS 项目中的所有文件启用此功能 有办法这样做吗 在eclipse中的svn中发现同样
  • C# 将对象序列化为 SOAP 字符串数组问题

    我遇到一个问题 尝试将包含字符串数组的对象序列化为肥皂会导致我的应用程序出现异常 我正在执行以下操作来创建肥皂格式化程序 XmlTypeMapping mapping new SoapReflectionImporter ImportTyp
  • 将嵌套列表分成具有不相交元素的组

    我有一个看起来像这样的列表 my list 1 2 3 4 4 5 6 7 9 10 11 12 我想找到将列表分成两组的最佳方法 以便每组中的各个元素不重叠 例如 在上面的示例中 这两个组将是 group1 1 2 3 4 4 5 6 7
  • PostgreSQL 的 SQLAlchemy func.position() 的语法是什么?

    我正在尝试使用以下命令构建 SQLAlchemy 查询位置 http www postgresql org docs 9 1 static functions string html功能 使用它生成以下形式的 SQL 的正确语法是什么POS
  • 为什么登录本地虚拟机后,共享文件夹中的 git 状态会有所不同?

    我正在一台 OS X 机器上工作 并且有一个运行在上面的 CentOS 7 虚拟机 我在我的驱动器上设置了一个单独的 区分大小写 分区 其中包含在两台计算机之间共享的文件夹 以便我可以在 OS X 中工作 但在 CentOS 中构建 我有理
  • 使用 JQuery 单击特定的提交按钮

    我使用以下命令单击提交按钮 input type submit click 问题是我的页面上有超过 1 个提交按钮 因此我需要定位特定的提交按钮 我怎么能这么做呢 如果你知道数量submit输入以及您想要触发哪一个 按顺序 click然后你
  • Flask-SQLAlchemy 中的 SQLAlchemy 2.0 版本 User.query.get(1)?

    问题 The Query get 方法是在 SQLAlchemy 2 0 中已弃用 https docs sqlalchemy org en 20 orm queryguide query html sqlalchemy orm Query
  • R leaflet - 显示/隐藏带有图层组的 addControl() 元素

    我有一个传单地图 它使用 HTML 的自定义图例并使用addControl函数 如下 R 中自定义标记的传单图例 https stackoverflow com questions 37862467 leaflet legend for c
  • 如何知道Android中的调用活动

    我有一个活动被其他一些活动调用 例如 我有 Activity1 Activity2 和 Activity3 Activity1 调用 Activity2 并传递参数 Activity3 也调用 Activity2 并传递参数 现在 根据调用
  • rJava 安装失败(MacOS、Red Hat)

    我遇到了同样的 rJava 问题 许多其他人似乎都曾在某一时刻遇到过 错误发生在以下情况 R CMD INSTALL测试JNI程序是否可以编译 输出建议运行R CMD javareconf ed or sudo R CMD javareco
  • 一起显示两个视频,然后在单个屏幕上作为合并视频输出

    这个问题听起来可能有点复杂或模棱两可 但我会尽力让它清楚 我已经做了很多谷歌搜索并花了很多时间 但没有找到任何与 Windows 相关的内容 我想在一个屏幕上播放两个视频 一个作为背景的全屏 一个在其顶部的小窗口或右角的小宽度 高度中 然后
  • 如何在 Microsoft Graph Mail API 上使用 $filter 的“in”运算符?

    我正在尝试使用 microsoft graph mail api 使用 in 运算符查询少量电子邮件 但找不到示例 这就是我尝试使用它的方式 https graph microsoft com v1 0 me messages filter
  • 从单个 png 图像中获取图标

    到目前为止我已经见过很多次了 但我自己从未使用过 有人可以解释一下如何从这个单一的 png 图像中获取特定的图标图片 例如我使用 css 用红色选择的图标 它被称作 它用于减少http请求 基本上所有图标都放置在单个画布上并用作backgr