css 图片 右上角 小图标

网站中常见的美观小巧的小图标，往往出现在网站的右上角，十分的引人注目。

实现这样的功能要使用CSS中的background-image属性，以及background-position属性。在HTML中引入一个小图标的下载链接，可使用以下代码：

<link href="css/icons.css" rel="stylesheet">

在CSS中定义小图标出现的位置和大小，可使用以下代码：

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../images/icon.png');
  background-position: -10px -10px;
}

其中，background-image属性定义小图标的下载链接，background-position定义小图标在元素中的偏移量，也就是小图标在元素中的位置。

如果需要在多个元素中使用同样的小图标，可以定义一个class，再在多个元素中使用该class，如下所示：

<p><span class="icon"></span>这是一个测试</p>
<div class="icon"></div>

这样，就可以在不同的元素中实现同样的小图标右上角显示效果了。