如何使用CSS设置png图标集？
白骑士
我在许多示例，jquery插件和CSS样式的htmlElement中看到了它们用几个图标设置图像的图标。
我想使用我的应用程序进行练习。
例如，在该图中，如何在CSS中选择一个？或选择其中一种的正确方法是什么？
有什么例子吗？
谢谢你！
风神
使用CSS的技巧是显示整个图像，但是通过将其设置为背景或绝对位置为的图像来对其进行翻译和剪切（由其父对象剪切）overflow: hidden。
例如，假设以下HTML：
<div class="sprite-images checkbox"></div>
并假设我们要显示的复选框(32, 32)位于spritesheet中，并且大小为32x32px。
然后，您的CSS将如下所示：
.sprite-images{
width: 32px;
height: 32px;
display: block; // this doesn't matter too much, but can't be inline
}
.sprite-images.checkbox{
background-image: url("images/my_spritesheet.png"); // <-- insert spritesheet url
background-position: 32px 32px; // <-- these are the spritesheet coords for the actual icon
}
就这么简单。这background-image将被div本身自动裁剪，我们已经将其设置为32x32的精灵大小，因此只需在后台转换它即可，这样只有您想要的精灵才可见。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何设置Zurb Foundation图标？
- 2
Dart中如何使用不同的核心图标集？
- 3
如何使用CSS更改图标颜色
- 4
使用ItemContainerStyle时如何在ContextMenu的MenuItem中设置图标
- 5
如何使用CSS制作小图标？
- 6
如何用CSS设置png图标的样式？
- 7
如何设置使用离子的推送通知的应用程序图标？
- 8
如何使用ImageMagick为黑色透明的PNG图标着色
- 9
如何使用AppleScript或终端删除PNG文件的预览图标？
- 10
我想使用简单的图标，例如iOS中“设置”左侧的图标。使用svg vs png有什么好处？
- 11
如何使用CSS居中图标
- 12
如何使用CSS替换PNG图像的颜色？
- 13
如何使用CSS在圆角外添加图标？
- 14
如何使用iOS 7上的旧图标集
- 15
带有png图标CSS的翻转
- 16
如何使用此代码快速实现？隐藏停靠图标集
- 17
如何设置窗口的图标
- 18
如何为Eclipse设置图标？
- 19
如何使用设置的溢出图标
- 20
如何为班级设置图标？
- 21
如何设置图标无间隙？
- 22
如何使用 Retrofit 从 URL 下载图像并设置为通知图标
- 23
如何使用 PyGObject 为整个应用程序设置图标
- 24
如何使用 URL 在 Android 中设置图标
- 25
如何使用css从字体真棒图标或文本设置相等的间距
- 26
如何使用 TabLayout 在 Android Viewpager 上设置图标
- 27
如何仅使用 css 显示简单图标
- 28
如何为 ClickOnce 设置图标
- 29
使用 CSS 在 SWT CCombo 上设置按钮图标
我来说两句