css 图片上添加小图标

在网页设计中，常常需要通过CSS在图片上添加小图标来增加表现力和功能性。下面将介绍如何利用CSS来实现这一功能。 首先，我们需要准备一张图片作为背景。假设我们有一张名为“icon.png”的图片，我们要在这张图片上加上一个文字图标，可以使用如下CSS样式：

.icon {
  background-image: url('icon.png');
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.icon::after {
  content: '文字图标';
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
}

以上代码使用了伪元素::after来生成一个文字图标，并利用position属性使其相对于原图片进行定位。具体解释如下： 1. background-image：设为我们要添加小图标的背景图片。 2. background-position：将背景图片居中。 3. background-repeat：禁止背景图片重复出现。 4. position: relative：让容器.icon的position属性为相对的。 5. content: '文字图标';：我们要添加的文字图标的内容。 6. display: inline-block;：让伪元素::after的display属性为内联块级元素。 7. position: absolute;：将伪元素::after进行绝对定位。 8. top: 10px;、left: 10px;：设置伪元素::after的偏移值。 9. width: 20px;、height: 20px;：设置伪元素::after的尺寸大小。 10. background-color: #ff0000;、color: #fff;：设定伪元素::after的颜色和背景颜色。 11. font-size: 12px;、line-height: 20px;、text-align: center;：指定伪元素::after文字部分的字体大小、行高和文字居中对齐。 12. border-radius: 50%;：使用圆形边框半径设置伪元素::after为圆形。 通过以上代码，我们可以在图片上添加一个小图标，从而增强网页的表现力和功能性。