什么时候不应该使用 CSS 精灵?

2023-12-25

我想知道什么时候不应该使用 CSS 精灵。 CSS 精灵效果很好,但是在某些情况下它们会带来很多麻烦吗?


和所有事物一样,它有有用的时候,也有有害的时候。

许多开发人员喜欢使用 CSS sprite,因为它可以节省请求时间 - 浏览器发出一个请求,下载图像,所有各种 sprite 现在都会自动缓存并且速度极快。

那么怎么会痛呢?

因为下载大小!=内存大小。

一旦浏览器将其加载到内存中,只有 10kb 的 PNG 或 GIF 实际上可能会大得多。问题是,虽然 GIF 之类的东西会压缩颜色的实心区域,但浏览器会将其扩展为位图,其中所有相同尺寸的图像使用相同的内存。

它加载一个新的位图every当你在某个地方使用该图像时。

所以凡事都要适度。

See: http://blog.mozilla.com/webdev/2009/06/22/use-sprites-wisely/ http://blog.mozilla.com/webdev/2009/06/22/use-sprites-wisely/了解更多信息。

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

什么时候不应该使用 CSS 精灵? 的相关文章

  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi
  • 两个 Div 之间的固定宽度间隙

    有谁知道如何修复两个 div 之间的间隙 我有一个主要内容 Div 里面有两个带有图片的 Div 视图的宽度为 768 像素 当我开始拉伸视图时 两张图片开始相互远离 但理想情况下 主要内容 Div 应该在周围有空白的情况下拉伸 并且图片之
  • 通过 JavaScript 检测浏览器换行

    我需要 javascript 来检测每个浏览器包装的文本行并将其包装到 span class line 我读过一些关于测量每个单词的 y 轴的文章 但还没有看到可靠的解决方案 这是我到目前为止所拥有的 看到它Jsfiddle http js
  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的
  • Flexbox 不适用于 iPad 和 Safari [重复]

    这个问题在这里已经有答案了 我在网站上使用 Flexbox 但它在 iPad Air iPad 3 和 Safari PC 上崩溃 设计和代码与此 codepen 类似 http codepen io anon pen xwJzEg htt
  • 如何动态打破 FlexBox 列以开始新列

    I have a dynamic list of items containing text placed column wise which I need to break after every 5th item 我只有两个限制 每个
  • CSS 中的像素与像素密度

    我对 HTML 和 CSS 非常陌生 我突然想到 当决定某个东西是 5px 时 比如说 由于像素的物理尺寸取决于密度 所以 5px 在 100 ppi 的屏幕上看起来肯定比在 300 ppi 的屏幕上看起来更大ppi 这是正确的吗 如果是
  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • 使用 Java 清理 CSS

    Java 中有没有一个好的库可以清理 CSS 样式表 我们希望允许管理员用户上传 CSS 样式表来控制他们管理的网站部分的外观 当然 我们不希望出现诸如background url javascript 之类的XSS攻击 因此我们正在寻找一
  • jQuery 更改事件未在输入元素上触发

    首先 我检查了与我的问题类似的每个主题 不幸的是 我还没有找到答案 我尝试结合一些答案 但没有成功 注 刚开始学习jQuery 所以这是我的问题 我创建了一个带有四个文本输入和一个按钮的表单 每个输入内部都有一个 svg 图标和一个占位符文
  • 使用 Javascript 从 CSS 文件中提取颜色

    我正在上传一个 css 文件 希望从中记录引用的每种颜色 所以如果 css 文件有 background color ffffff color 000000 我希望能够创建一个包含以下内容的列表 ffffff 000000 这样做的最好方法
  • 更改链接悬停时的正文背景颜色

    当鼠标悬停在页面上时如何更改页面背景a 我正在寻找仅 css 的解决方案 我知道你可以通过 css 到达子元素 但我不知道如何 是否可以到达主体 看看这个DEMO http jsfiddle net bhavuksuthar bjsvhze
  • Windows Phone 8 中的 Webview 弹跳

    我需要知道是否有任何方法可以控制 Windows 8 中的 webview 弹跳属性 我已经尝试过 ms touch action none 它确实会停止弹跳 但会禁用应用程序中的整个滚动 我已尝试以下方法 但这些方法不起作用 backfa
  • HTML 覆盖高度覆盖整个可见页面

    我有一个使用 AJAX 加载一些内容的网页 我想在加载过程中显示带有加载指示器的覆盖层 以便用户无法与页面的大部分内容交互 除了顶部的菜单 我正在使用 jQuery 和jQuery BlockUI 插件 http malsup com jq
  • 父>子CSS选择器

    我经常使用这个CSS选择器parent gt child 我的设计在 Mozilla 和 Opera 中看起来不错 但在 IE 中 就很糟糕了 我知道 gt 在 IE 中无法识别 但是 IE 中的替代方案是什么 一种替代方法是使用通用选择器
  • CSS:将加载指示器放置在屏幕中央

    如何将加载指示器放置在屏幕中央 目前我正在使用一个小占位符 它似乎工作得很好 但是 当我向下滚动时 加载指示器保持在该预定义位置 我怎样才能让它跟随滚动 使其始终位于顶部 busy position absolute left 50 top
  • Excel 类似 HTML 表格,可在 x 轴(完整表格)和 y 轴(标题固定)上滚动

    我想建立一个具有固定宽度列的表格 在大多数情况下 表数据会水平和垂直溢出 如果列的宽度大于视图宽度 则需要水平滚动条来滚动并查看所有表列 同时滚动标题和数据 如果数据的高度大于可用视图 则会出现垂直滚动框 但在滚动时保持标题固定 以便用户关
  • 使用文本遮盖视频

    是否可以使用 HTML CSS 文本来屏蔽视频 我已经找到并设置了这种工作方式 但没有一种允许文本后面有透明背景 例如 这支笔要求您进行某种填充 它并不是真正掩盖实际视频 而是创造幻觉 https codepen io dudleystor
  • iOS 5 中的 webkit-overflow-scrolling: touch "handle" 是否有外观 CSS 规则?

    我有一个元素恰好同时具有 webkit overflow scrolling touch 和 background color black 因此显示滚动位置的 手柄 很难看到 是否有 webkit CSS 样式规则可以改变该 手柄 的外观

随机推荐

  • android 服务startService()和bindService()

    我想知道是否可以有一个通过 startService 启动的服务 然后也能够绑定到该服务并执行一些远程过程调用 根据这个 http developer android com guide topics fundamentals html s
  • 尝试使用字符串+变量设置Vue元页面标题

    我使用 Vue Meta 作为使用 Nuxt JS 2 4 5 的项目中博客应用程序的一部分 我在尝试设置标题 变量时遇到一些麻烦data 我不确定我错过了什么 我尝试了多次尝试让它工作 移动代码 使用this手动设置一下 好像没什么用
  • 我使用react-create-app并收到此错误=> ./src/index.css (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4 -1

    我在用着create react app对于一个项目来说 直到今天早上一切都很好 字体也从来不是问题 我通过运行得到了这个错误npm start gt src index css node modules react scripts nod
  • 在类路径上添加属性文件

    我正在构建一个基于 Spring Boot 的 Spring 独立应用程序 我希望此应用程序从单独目录中的 jar 文件外部的属性文件中读取其属性 构建的应用程序的结构如下所示 testApplication test 1 0 SNAPSH
  • 如何以自然的语法实现线程安全容器?

    Preface 如果按原样使用 下面的代码会导致未定义的行为 vector
  • 如何在 Angular2 应用程序中禁用 HTML5 表单验证?

    我有一个表单 其中包含所需的电子邮件类型的输入 我想在该输入字段上进行自己的自定义验证 以便能够以不同的语言显示错误消息 但是 目前输入字段是通过 HTML5 验证进行评估的 代码如下所示
  • 模块中未找到 Android Facet

    我刚刚从 Eclipse 切换到 Android Studio 我正在尝试在设置 gradle 文件后运行我的应用程序 该项目构建没有错误 但是我无法运行我的应用程序 因为没有找到 android 方面 当我进入项目结构时 没有任何方面 并
  • JPA 2.1 中条件获取连接中的导航方法

    在 JPA 标准中使用 fetch join 时 看不到导航方法 下面给出一个例子 Root
  • UIImagePickerController 覆盖自动旋转

    我正在使用 UIImagePicker 访问 iPhone 应用程序上的相机 我希望能够根据 iPhone 的方向为图像选择器提供两种不同的叠加层 是否有可能做到这一点 似乎如果我将以下方法放在拥有 UIImagePickerControl
  • GitHub 上的审阅者和受让人之间有什么区别?

    当我创建拉取请求时 我可以看到两个选项审稿人 and 受让人 它们之间有什么区别 我认为这是来自 github 最新版本的任何一个 审阅者和受让人是组织谁正在处理拉取请求和问题的工具 他们不授予任何额外的权限 审核者是您特别要求审核您的拉取
  • 在Python中创建包含整数的类列表对象的最快方法

    在Python中制作包含整数 浮点 非常简单的数据类型 的类似列表的对象的最快方法是什么 类似列表 是什么意思 这意味着我想要一个支持列表的两个 非常 基本操作的对象 获取某个索引中的对象 1 并更改其值 2 在发布此内容之前我遇到了哪些帖
  • 循环内的 Promise

    在下面的代码中 我有一个无限循环 我不知道为什么会发生 我最好的猜测是因为里面的函数是async循环不会等待它 因此循环永远不会停止 解决这个问题的最佳方法是什么 var generateToken function userId retu
  • Spring/Hibernate 添加一个在关闭 EntityManagerFactory 之前运行的关闭钩子

    当我关闭服务器时 我有一些工作正在填充下载和填充数据 我希望这些工作可以优雅地完成 我尝试添加 Runtime getRuntime addShutDownHook 但这似乎在 Entitymanager 已经关闭之后运行 因为在运行之前异
  • 计算某个日期之前一个月的行数

    我想在我的数据框中添加一列 该列将计算每个日期之前一个月每个公园的行数 我的数据框如下所示 gt Reaction per park per day 3 Park Date Type 1 2 Coy season AC code Year
  • Paging 3 库使用 LoadType.APPEND 递归调用加载方法

    我正在尝试显示来自图标查找器 API https developer iconfinder com reference getting started with your api 1 好像是ItemKeyedDataSource对我来说 我
  • MVC3 - Ajax 操作链接 - OnBegin、onComplete

    使用 MVC3 C 和 Razor 视图引擎 我有一个带有 Ajax 操作链接的表单 在选项中 我尝试指定 OnBegin 和 OnComplete javascript 函数调用 在这个问题中 我取出了功能的核心部分 并简单地添加了警报
  • 如何让 Maven 将 jar 包含在我的 Eclipse 引用库中?

    我正在尝试采用现有的 Eclipse 项目并添加 pom xml 以便我可以使用 Maven 进行自动构建 在项目中 我的引用库中有一个 jar 文件 该文件不在 Maven 存储库中 我需要做什么才能让 Maven 识别 jar 文件 我
  • 使用 ocaml 图形保存图像

    我想将ocaml图形生成的图片保存在文件中 png或jpeg 谢谢 我假设你正在谈论Graphicsocaml 中的模块 您应该注意到Graphics模块不适用于创建和处理图像 你当然可以打电话Graphics dump image如果你已
  • Postgres pg_try_advisory_lock 阻止所有记录

    我在用着pg try advisory lock 在 Postgres 中 接下来的两个查询锁定了多个记录table1 1 SELECT a id FROM table1 a JOIN table2 b ON a table1 id b i
  • 什么时候不应该使用 CSS 精灵?

    我想知道什么时候不应该使用 CSS 精灵 CSS 精灵效果很好 但是在某些情况下它们会带来很多麻烦吗 和所有事物一样 它有有用的时候 也有有害的时候 许多开发人员喜欢使用 CSS sprite 因为它可以节省请求时间 浏览器发出一个请求 下