图像精灵-如何获得图像的一部分

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图像精灵-如何获得图像的一部分相关的知识,希望对你有一定的参考价值。

One of the great methods to load and work with icons in web pages is to load one image that is a collection of several icons and use any icon as needed, that reduces the number of server request and save bandwidth.
  1. <style>
  2. div.img1{
  3. width:32px; /* width of selected icon */
  4. height:32px; /* height of selected icon */
  5. background:url(http://mysite/image.png) -130px -16px; /* the position of icon in the main image */
  6. }
  7.  
  8. div.img2{
  9. width:29px;
  10. height:27px;
  11. background:url(http://mysite/image.png) -35px -2px;
  12. }
  13. </style>
  14.  
  15. <body>
  16. <div class="img1"></div>
  17. <div class="img2"></div>
  18. </body>

以上是关于图像精灵-如何获得图像的一部分的主要内容,如果未能解决你的问题,请参考以下文章

当我尝试重复x一个图像精灵时,它会显示整个图像

我将如何在我的代码中使用图像精灵?

CSS精灵图像+背景重复其中的一部分

在 SpriteKit 中,如何制作我的英雄精灵的裁剪(带有透明段)图像?

如何检测何时单击矩形对象、图像或精灵

如何在片段着色器中平铺部分纹理