简体繁体 English

如何使用一张大图片将其分解成较小的部分以用于网站？

[英]How can I use one large image and break it apart into smaller pieces for a website?

原文 2012-03-01 23:44:00 6 1 javascript/ html/ css/ image/ css-sprites

So I've seen a method that several people seem to use where they have one large image (a master template image, if you will), and after that image is loaded, there is some sort of script or coding that can isolate individual parts of the image and use just that smaller part for an element such as a button. 因此，我看过一种方法，似乎有几个人使用它们来制作一张大图像（如果需要，可以使用主模板图像），并且在加载该图像之后，可以使用某种脚本或编码来隔离各个部分并仅将较小的部分用于按钮等元素。 Such is the case with the letter tiles on Words With Friends on Facebook. Facebook的“与朋友共度”中的字母拼贴就是这种情况。 I'm not talking about how to use Photoshop to separate them. 我不是在谈论如何使用Photoshop分隔它们。 I'm hoping for a web page on the matter as well will hopefully some tutorials or examples. 我希望与此有关的网页也希望有一些教程或示例。 I'm looking for something I can do with HTML, CSS, or JavaScript. 我正在寻找可以使用HTML，CSS或JavaScript执行的操作。 Or even jQuery. 甚至是jQuery。

Sorry I can't provide any code, since that's what I'm after, and I don't know exactly what this method is called either. 抱歉，我无法提供任何代码，因为这是我要的，而且我也不确切知道该方法的名称。

1 个解决方案

There's a CSS technique called spriting. 有一种称为spriting的CSS技术。 I've found the following article explains it brilliantly: 我发现以下文章对其进行了出色的解释：

CSS Sprites: What They Are, Why They're Cool, and How To Use Them CSS Sprites：它们是什么，为什么很酷，以及如何使用它们

如何将long for循环分解为较小但可读性更高的片段，仍然可以执行？ - How can I break a long for loop down into smaller more readable pieces that still perform?

如何在几个较小的相邻 div 上拥有一张大图像 - How can I have one large image over several smaller adjoining divs

Webpack可以帮助我将一个大文件分成多个小块吗？ - Can Webpack helps me separate a large single file into smaller pieces?

除了追加之外，我如何使用新的FormData方法？ - How can I use the new FormData methods apart from append?

如何在 graphql-yoga 中将 GraphQL 模式分解为多个文件 - How can I break apart a GraphQL Schema into multiple files in graphql-yoga

如何拆开这个 SVG 字体以便在 Chrome 中以编程方式使用它？ - How can I take apart this SVG font to use it programmatically in Chrome?

如何将图像分成9个小图像（有点拼图） - How to break an image into 9 small ones (sort of puzzle pieces)

切成小块的图像Python或JavaScript - Cutting image in smaller pieces Python or JavaScript

如何将图像分成几部分 - How do I split image into pieces

如何使用.split（）将字符串分解为更小的字符串？ - How do I use .split() to break up a string into much smaller strings?

暂无

暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将long for循环分解为较小但可读性更高的片段，仍然可以执行？ - How can I break a long for loop down into smaller more readable pieces that still perform? 如何在几个较小的相邻 div 上拥有一张大图像 - How can I have one large image over several smaller adjoining divs Webpack可以帮助我将一个大文件分成多个小块吗？ - Can Webpack helps me separate a large single file into smaller pieces? 除了追加之外，我如何使用新的FormData方法？ - How can I use the new FormData methods apart from append? 如何在 graphql-yoga 中将 GraphQL 模式分解为多个文件 - How can I break apart a GraphQL Schema into multiple files in graphql-yoga 如何拆开这个 SVG 字体以便在 Chrome 中以编程方式使用它？ - How can I take apart this SVG font to use it programmatically in Chrome? 如何将图像分成9个小图像（有点拼图） - How to break an image into 9 small ones (sort of puzzle pieces) 切成小块的图像Python或JavaScript - Cutting image in smaller pieces Python or JavaScript 如何将图像分成几部分 - How do I split image into pieces 如何使用.split（）将字符串分解为更小的字符串？ - How do I use .split() to break up a string into much smaller strings?

相关标签

粤ICP备18138465号 © 2020-2024 STACKOOM.COM