CSS 如何在照片上放置图标

在 HTML 页面中，我们可以使用 CSS 来在照片上放置图标。这可以用于在照片中标记特定的区域或添加其他视觉效果。

以下是一些使用 CSS 在照片上放置图标的方法。

使用绝对定位

一种常见的方法是使用绝对定位来放置图标。通过将图标元素的 position 属性设置为 absolute，可以将其位置相对于其最近的具有相对或绝对定位的祖先元素进行定位。

<div class="photo">
  <img src="photo.jpg" alt="照片">
  <i class="fas fa-star"></i>
</div>

.photo {
  position: relative;
}

.photo i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在上面的示例中，我们将图标元素 (<i>) 放置在一个具有相对定位的父元素 (<div class="photo">) 中。然后，通过将图标元素的 top 和 left 属性设置为 50%，然后使用 transform 属性将其水平和垂直居中。

使用背景图像

另一种方法是使用背景图像来放置图标。这个方法适用于将图标作为背景添加到任何元素中，包括照片。

<div class="photo with-icon"></div>

.photo.with-icon {
  background-image: url('icon.png');
  background-size: 50px 50px;
  background-position: center;
  background-repeat: no-repeat;
}

在上面的示例中，我们将要使用的图标作为背景图像设置到照片的元素 (<div class="photo">) 上。通过调整 background-size 属性，可以设置图标的大小，background-position 属性可以用于设置其位置，而 background-repeat 属性可以指定是否重复背景图像。

使用伪元素

还有一种常见的方法是使用伪元素来放置图标。这可以通过添加 ::before 或 ::after 伪元素，并应用所需的样式来实现。

<div class="photo">
  <img src="photo.jpg" alt="照片">
</div>

.photo::after {
  content: "";
  display: inline-block;
  background-image: url('icon.png');
  width: 50px;
  height: 50px;
}

在上面的示例中，我们通过添加 ::after 伪元素，并使用 content 属性为空内容，应用图标作为背景图像，然后根据需要调整其大小。

这些都是使用 CSS 在照片上放置图标的一些常见方法。根据需要选择适合的方法，并根据具体需求调整样式。

请注意，上述示例中的图标和类名仅作为示例使用，实际使用时需要根据需要进行修改和替换。