css图片怎么显示多个小图标

今天我们来学习如何使用CSS来展示多个小图标。通常情况下，我们需要在网站中使用多个小图标来增加页面的美观度和可读性。这篇文章将以简单易懂的方式为大家介绍。 首先，我们需要准备一些小图标。这些图标可以是PNG、SVG或其他常见的图像格式。我们可以将所有这些图标放在一个大图中，然后使用CSS来某定制这个大图。 接下来，我们使用CSS来定义一个类，以展示我们的小图标。

.icon{ 
    background-image: url('icons.png'); 
    background-repeat: no-repeat; 
    display: inline-block; 
}

我们使用background-image属性来设置背景图像。在这个例子中，我们设置为icons.png。然后，我们使用background-repeat属性来设置图像是否应该重复。在本例中，我们将其设置为no-repeat，因为我们只想展示图像一次。最后，我们使用display属性来设置元素的显示方式。在这个例子中，我们将其设置为inline-block，以便图像相互排列，并可在行内显示。 现在，我们可以在HTML中使用这个类来展示图像了。

<p>这里是一个带有图像的文字。<span class="icon" style="width:16px;height:16px;background-position:0px 0px;"></span> 这是第一个图像。 <span class="icon" style="width:16px;height:16px;background-position:-20px 0px;"></span> 这是第二个图像。 </p>

在这个例子中，我们在一个段落中使用了两个图标。我们使用了一个span元素，并为它设置了类为icon。我们还在每个元素上设置了样式，以定义元素的大小和位置。 现在，我们可以使用以上代码在网站中展示多个小图标。如果需要显示更多的图标，我们可以在大图中添加更多的小图标，并在CSS中定义新的规则。这样，我们就可以轻松地展示任意数量的小图标了。