问题标签 [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.

0 投票
5 回答
3304 浏览

jquery - 使用 jQuery 循环浏览 1 个 sprite 中包含的 4 个横幅图像

我有 4 个横幅图像,我想在无限循环中使用基本的淡入淡出动画循环它们。我找到了这个 jQuery 插件:http: //jquery.malsup.com/cycle/并尝试这样做:

HTML:

CSS:

JAVASCRIPT:

最终发生的情况是,由于位置的原因,没有一个横幅出现:在循环期间,每个横幅都设置了绝对值。我在这里想念什么?这不应该工作吗?有一个更好的方法吗?

0 投票
2 回答
1104 浏览

css - 网上最好的css sprite?

可能重复:
Sprite 图像的最佳方式?

嗨,我一直在使用这个http://spritegen.website-performance.org来制作 css sprites 生成器。但它不值得伟大。我见过像 yahoo、bing.google 这样的网站,他们使用的 css sprite 非常棒,而且达到了很高的水平。在哪里可以在线获得像这样的 css sprite 生成器。此外,图像被完全压缩和最小化。我将不胜感激任何帮助!

0 投票
5 回答
1173 浏览

asp.net - 如何从存储在数据库中的图像创建 CSS 精灵?

我有一个 ASHX 处理程序,用于显示存储在数据库中的图像。我将图像显示为缩略图,然后如果用户将鼠标悬停在它们上方,则显示为全尺寸。

如何在运行时组合图像以生成在这种情况下使用的 CSS 精灵?

如果可以做到,有人对从哪里开始有建议吗?

更新

似乎大多数人都说这不是使用精灵的好情况。我是精灵概念的新手,所以请多多包涵。

如果我每次都要从我的数据库中的页面上加载 30 个缩略图,为什么将它们作为一个大图像从服务器传递到客户端而不是传递 30 个单独的图像没有意义呢?这不是更快吗?这不是 CSS Sprites 的目的吗?

0 投票
3 回答
691 浏览

css - 带有一些语义文本的 CSS 图标,浏览器兼容性问题

我正在使用此代码来显示精灵驱动的图标(如果图形可用,则仅应显示图标,对于其他设备,文本应该有所帮助):

标记:

CSS:

sprite 本身在任何浏览器中都可以正常工作,但由于某种原因,文本显示在 Opera 和 Chrome 中,因为与溢出结合的填充:隐藏不会按预期工作。

有什么想法可以改进吗?提前致谢....

0 投票
4 回答
12607 浏览

html - CSS Sprites 重复图像

我想知道是否有任何方法可以使用 css sprites 仅使用一个图像来重复和非重复图像。所以在这种情况下,我想组合页面上的所有图像,无论宽度和高度是多少,以及它们是否将用作重复或非重复图像。我知道标准是使用所有非重复图像创建一个图像,并使用所有重复图像创建另一个图像。但我只是想知道我是否可以只为所有内容使用 1 张图片。

谢谢。

0 投票
1 回答
27 浏览

css - CSS - 如何指定 CSS 以使用户缩放页面时页面没有水平条?

请参考http://code.google.com/apis/recaptcha/intro.html 当用户放大页面时,底部没有引入水平条。

我想知道如何设计具有此属性的两列页面。

谢谢

0 投票
2 回答
2146 浏览

css - 如何将简写 CSS 转换为简写?

是否有任何工具可以自动将速记 css 转换为速记?我需要这个因为我想使用不能很好地使用速记的SmartSprites 。

而且最好也是一个相反的工具,所以在精灵计算之后我可以尽可能地缩小css......

也欢迎任何其他用于自动生成的解决方案,基本上我正在寻找一些可以集成到构建过程中的命令行工具,以便开发人员仍然可以在原始 css 代码上进行开发。

0 投票
2 回答
1462 浏览

jquery - jQuery 控制的带有 CSS 精灵的交互式“游戏”

嘿,我想知道我是否可以通过单击图像的一部分时发生一些类似的小游戏来使我的页面 ( http://marioplanet.com/images/logo/logo.png ) 上的标题具有交互性.

它将让马里奥,只有马里奥,在文本之上,使其余角色在“迷你游戏”开始时消失。

然后,最终用户将能够使用左右箭头键左右移动马里奥,并使用空格键让他跳跃。

这就是我对初学者的要求,当我发展我的 jQuery 技能时,我会更高级地发布“迷你游戏”的小“更新”。

我只是想知道这是否可行,以及我希望在这样一个项目上花费多少时间。

任何关于如何最好地前进的建议或信息都会很棒!此外,如果仅使用 jQuery 和 CSS 很难做到这一点,我希望得到建议!:)

0 投票
2 回答
5597 浏览

javascript - 如何使用 jQuery 为 CSS 精灵设置动画

我试图找到使用 CSS sprites 和 jQuery 复制 12fps 动画的最简单方法。

我在考虑使用 setInterval() 所以每 83.33 毫秒,下一个精灵将被加载。

我的问题是我不知道该怎么做...

我在想,因为我的精灵名称是递增的,例如:

所以,如果我们能以某种方式增加这个直到我们到达最后一个实例,在这种情况下mariohammerswing5.png它会循环回到开头。

如果我能弄清楚那部分,我准备好了!:)

有什么建议么?

0 投票
1 回答
480 浏览

jquery - IE8 仅在 jQuery CSS 下拉菜单中呈现第一个类更改

http://www.scherer.nl/nieuw/nieuw网站准备就绪后,该部分将被删除)左侧的下拉子菜单在悬停时应将其背景图像上移,因此悬停的项目变为红色等橙色.
使用 jQuery,我使用 toggleClass 将类“悬停”添加到悬停的菜单项。
CSS 使背景图像向上移动,显示它的红色部分。
这在任何浏览器中都可以正常工作,但在 IE8 中,只有第一个悬停的项目被更改,并且当鼠标悬停在其他项目上时它不会变回来。当我将 IE8 置于 IE7 兼容模式时,它确实可以工作,但是子菜单会向右和向下移动一点,无论如何,我不想强​​制 IE 使用兼容模式。

几天来我一直在寻找这个问题的答案,所以也许这里的任何人都可以想到一个解决方案?