如何使用 CSS 在图片上添加图标

在网页设计中，图片上添加图标是经常遇到的需求。下面我们将介绍如何使用 CSS 在图片上添加图标。

准备工作

在开始之前，需要确保你已经准备好了一张图片和一个图标。图片可以使用 img 标签添加到页面中，图标可以使用字体文件或 SVG 文件，在本例中我们将使用 FontAwesome 字体及其图标。

使用伪元素 ::after 添加图标

我们可以使用伪元素 ::after 来添加图标，并通过相应的 CSS 属性来定位它。具体步骤如下：

1. 引入 FontAwesome 字体

使用以下代码将 FontAwesome 字体添加到页面中：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-Qb8/QCmL1pGpA/DGzVwA8+EVyBb5/mivG9CvCEpHBBzijCWhcz5ZKt5pp5YE5W5e" crossorigin="anonymous">

2. 添加图片和伪元素

使用以下 HTML 代码将图片添加到页面中：

<div class="image-wrapper">
  <img src="your-image-url" alt="your-image" />
  <span class="icon"></span> 
</div>

其中 div.image-wrapper 是包含图片和图标的容器，img 是要添加图标的图片，span.icon 是用来实现图标的伪元素。

3. 定义伪元素样式

使用以下 CSS 代码来定义伪元素的样式：

.image-wrapper {
  position: relative;
}

.image-wrapper img {
  display: block;
}

.image-wrapper .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'FontAwesome';
  font-size: 24px;
  color: #fff;
}

.image-wrapper .icon::after {
  content: '\f030'; /*FontAwesome 图标代码*/
}

其中 position: relative; 是设置 div.image-wrapper 为相对定位，使后代元素 position: absolute; 能够相对于其定位。在 .image-wrapper .icon 选择器中，使用 top: 50% 和 left: 50% 让伪元素位于图片中心。transform: translate(-50%, -50%); 可以使伪元素居中对齐。font-family: 'FontAwesome'; 设置字体为 FontAwesome。使用 content 属性可以将伪元素的内容设置为特定的 Unicode 字符，即我们需要的 FontAwesome 图标代码。

4. 添加鼠标悬停效果

如果你想要在鼠标悬停时改变图标的样式，可以添加以下代码：

.image-wrapper .icon:hover {
  color: #000; /*鼠标悬停时图标的颜色*/
}

至此，你已经成功使用 CSS 在图片上添加了图标。

总结

在本文中，我们介绍了如何使用 CSS 在图片上添加图标，并通过添加鼠标悬停效果的方式增加了交互性。希望这篇文章对你有所帮助。