css怎么从图片扣出小图标

CSS是一种前端开发语言，常用于网站的样式设计。在开发过程中，经常需要从图片中扣出小图标来实现页面的美化。在本文中，我们将介绍如何使用CSS从图片中扣出小图标。

首先，需要从图片中截取要使用的小图标。可以使用像素级别的图片编辑软件，比如Photoshop，或者在线图片编辑器，比如Photopea。使用编辑工具选择需要的小图标，然后复制到一个新图层中，确保背景是透明的。

.icon {
  width: 30px; /* 设置宽度 */
  height: 30px; /* 设置高度 */
  background-image: url('icon.png'); /* 设置背景图片 */
  background-position: -10px -20px; /* 设置背景图片位置 */
}

以上是一个简单的CSS代码示例。.icon类设置了宽度和高度，并且指定了背景图片的位置和背景颜色。其中，background-position属性用来设置背景图片的位置，可以使用像素值或者百分比值。

一般来说，需要用到多个小图标时可以使用CSS Sprites技术。这种技术可以将多个小图标合并在一起，减少了 http 请求的次数，提高了页面的加载速度。

.sprite {
  width: 30px; /* 设置宽度 */
  height: 30px; /* 设置高度 */
  background-image: url('sprite.png'); /* 设置背景图片 */
  background-position: -10px -20px; /* 设置背景图片位置 */
}

以上是一个CSS Sprites的示例代码。.sprite类指定了宽度和高度，并且使用了合并后的背景图片。同样，使用background-position属性来设置这个小图标在合并后的图片中的位置。

总之，使用CSS从图片中扣出小图标是一个非常常见的需求。了解了以上方法之后，相信你也可以轻松地实现这个需求了。