CSS 是网页设计中非常重要的一部分。 它可以使我们的网页更加美观和实用。 在设计网页时，我们经常会使用图片来装饰页面。 该图像可能包含许多图标。 如果我们想单独保存这些图标，将会减少图像的数量和网页的加载时间。 因此，我们可以利用CSS技术将这个图标从一张图片中分割出来。
首先图标 css，我们需要将包含多个图标的图像导出到我们的网页。 可以使用以下代码：
.icon{
background-image: url("image.png");/*图片路径*/
background-repeat: no-repeat;/*禁止平铺*/
display: inline-block;/*块级元素转为行内元素*/
}
.icon1{
width: 30px;/*设置宽度*/
height: 30px;/*设置高度*/
background-position: -50px -50px;/*设置背景定位*/
}
代码中，我们首先定义一个.icon类图标 css，设置其长和高为30px，背景图片设置为image.png； 然后，我们定义另一个类.icon1，将其背景定位为图标在图像中的位置； 最后，我们使用 DIV 标签，将类设置为 .icon 和 .icon1，并将它们添加到 HTML 文件中。
利用CSS技术分割图片中的图标可以减少图片数量和网页的加载时间。 同时，还可以更好地控制图标等样式的大小和位置，使网页更加美观实用。 在实际的网页设计中，我们还可以结合其他CSS技术，例如悬停等效果，为图标和网页增添更多魅力。
