CSS 如何在照片上放置图标

在开发网站或移动应用时，我们可能需要在照片或图片上放置一些图标或标签标识。这时，使用 CSS 可以使这一过程变得简单和高效。

使用绝对定位

一种常见的方法是使用绝对定位来将图标放置在照片上。

我们可以创建一个父容器 <div>，将照片作为该容器的背景。然后，在容器内部添加一个子元素 <i> 来展示图标，并使用 CSS 的绝对定位将该元素放置在照片上。

以下是一个示例代码：

<div class="photo-container">
  <i class="icon fa fa-heart"></i>
</div>

.photo-container {
  width: 400px;
  height: 300px;
  background-image: url('your-photo-url');
  background-size: cover;
  position: relative;
}

.icon {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  font-size: 2rem;
}

使用 background-image 属性设置照片，position: relative 将父容器设置为相对定位，position: absolute 将子元素设置为绝对定位，使用 top 和 left 属性来定位图标的位置，并使用 transform 属性将其垂直和水平地居中。

使用伪元素

另一种方法是使用 CSS 的伪元素。我们可以将图标添加为子元素的 ::before 或 ::after 伪元素。然后，可以使用绝对定位来将伪元素放置在照片上。

以下是一个示例代码：

<div class="photo-container">
  <div class="photo"></div>
</div>

.photo-container {
  position: relative;
}

.photo {
  width: 400px;
  height: 300px;
  background-image: url('your-photo-url');
  background-size: cover;
}

.photo::before {
  content: '';
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 40px;
  height: 40px;
  background-image: url('your-icon-url');
  background-size: cover;
}

使用 content: '' 将伪元素内容设为空，并使用 display: block 将其变成块级元素。使用 background-image 属性设置图标，使用相同的绝对定位技术将图标放置在照片上。

这两种方法都是常用的实现方式。在实际开发中，我们可以根据需要来选择最适合的方法。