问题标签 [css-sprites]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - CSS 精灵帮助
我最初使用以下代码：
问题是当我将它转换为精灵时，我有一个固定的背景位置，比如 0px -400px；
现在我怎么把它放在左下角呢？
另外，我可以将背景重复与 CSS 精灵一起使用吗？
感谢您的时间。
jquery - jQuery切换来改变图像
我有一个包含图像的 div 列表：
当用户单击 div 时，我希望它将图像更改为 x-on.png，再次单击时，它将更改为 x-off.png，第三次单击时应恢复为 x。 .png
是否可以在不为每个图像更改手动指定 jQuery 的情况下执行此操作？我可以遍历 div 并找到图像名称，然后简单地将 -off/-on 附加到图像上吗？
谢谢！
css - 使用 jQuery Superfish 菜单插件的 IE7 中的 Z-index 问题
我需要修改 jQuery Superfish 菜单插件以适应菜单的使用图像。
在 Om oss 和 Medieomtale 下有子菜单。我为这个菜单使用了精灵图像。
它适用于 IE8、FF 等。但是 IE7 显示子菜单有问题。它显示子菜单，但是当我尝试在子菜单中导航时，它会淡出。
编者注
此问题中www.okadadesign.no用于演示该问题的链接已被删除，因为它不再可访问。
javascript - FireFox 3.5 重复获取图像精灵 - 如何防止？
编辑：Mozilla 修复了这个错误。这个线程已经死了。
编辑：这是一个 Mozilla 错误。看到这个线程：https ://bugzilla.mozilla.org/show_bug.cgi?id=501853
我在这里有一个用于我的图像的精灵：http ://www.trailbehind.com/site_media/images/sprite.png
在 FireFox 3.5 中，每次我在地图上渲染图标时，似乎都会获取精灵，当您加载此页面和/或平移地图时，您可以在 Firebug 网络面板中看到该行为：http://www.trailbehind。 com/node/1148091/
我以前在 Internet Explorer 中遇到过类似的问题，但我最终在 Safari 3/4、FF 2/3 和 IE 6/7/8 中得到了这个问题。现在，FF 3.5 出了点问题 :(
我试图将此代码放在文档中以预先缓存图像，但无济于事：
这是稍后创建地图标记（并再次获取精灵图像）的代码。它可能与 GMaps 相关 - 它似乎没有获取精灵来在左侧绘制每个图标或其他图像......只是地图。
html - 我可以在提交按钮上使用 csssprite
我想使用csssprites提交按钮有两个原因：
- 我已经动态创建了按钮，将来可能会本地化
- 即使页面上有 5 个按钮，我也只需要 1 个 HTTP 请求
问题是我想避免 javascript 用于按钮，因此我需要使用inputtype 的字段image。我可以像设置任何 csssprite 一样在该字段上设置背景图像。
问题是我发现我必须将图像源设置为一个空像素，否则我会得到一个损坏的图像图标。
话虽如此，这是我想出的最佳解决方案：
（您可以直接将此文件加载到浏览器中 - 我正在从随机站点借用图像）。
它工作起来还不错，但我必须使用我们的好老朋友pixel.gif。很怀旧！
没有 javascript 可能没有更好的方法，除非 css 中有一种方法可以隐藏损坏的图像文本和图标。
css-sprites - 在 Web 应用程序中使用 CSS Sprites 有什么好处？
我正在一个流量相当大的网站上工作，我正在研究使用 CSS sprite 来减少其设计中的图像加载数量。
除了减少传输的数据量之外，使用 CSS 精灵有什么好处吗？您真正节省了多少空间？是否存在使用 sprite 对网站有价值的阈值？
更新：感谢您的回复。它们显然都是经过深思熟虑的，并提供了很好的资源来验证你的观点。现在，我感觉更有能力在我的网站设计中做出关于使用 CSS sprites 的明智决定。
internet-explorer-6 - CSS 精灵和 IE6
IE6 是否支持 CSS 精灵？
youtube - 如何将 CSS 背景图像（精灵）制作成可点击区域？
以 YouTube 为例。
他们的标志实际上来自包含其他图形元素的大型主图像。但是，可以单击指向站点根目录的徽标。我正在研究他们的 HTML，但仍然不太确定他们是如何实现的。
任何人都可以看看它并解释一下吗？
css - 奇怪的 CSS 行为（sprite nav w/rollover）
这是有问题的导航图像：
http://img.skitch.com/20090807-t8e6d9ymrtpdifqy88xpu6x36.png
我想做的是非常基本的，过去我已经做过很多次了，我只是不明白为什么它现在不起作用。基本上使用上面的图像作为导航背景并相应地调整宽度和背景位置。这是我的CSS：
这是页面上的代码，带有通用 HTML5 文档类型 <!DOCTYPE html>，为将来的校对指定：
我遇到的奇怪的事情是：第一个选项卡 Home 运行良好。其余四个选项卡不服从初始背景位置属性，除非我指定！important，但翻转工作得很好。以下是这两种情况的图像，分别是：
http://img.skitch.com/20090807-fybag852bbbi6ut751w167y1hp.png
http://img.skitch.com/20090807-rmn9b2tu54q4agyta2idfra5x5.png
只是想对这个（希望如此）简单的问题有所了解。提前致谢！
html - 您如何制作背景图像以将其大小调整为包含元素？
检查此站点中主要选项卡的圆角这些是宽度为 440 像素的背景图像，它仍然会根据包含元素进行调整，而不会丢失圆角边缘。