css 图片 右上角 删除

CSS中，我们可以使用background-image属性来添加背景图片。为了让需要删除的图片更加显眼，我们可以将其放置在右上角，并添加一个“删除”图标。

方法如下：

.delete-icon {
  position: absolute; /* 相对于父元素定位 */
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-image: url("delete-icon.png"); /* 添加删除图标 */
  background-size: contain; /* 等比例缩放 */
  background-repeat: no-repeat;
}

.Box {
  position: relative; /* 父元素必须为相对定位 */
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background-image: url("background.jpg"); /* 添加背景图片 */
  background-size: cover; /* 充满整个容器 */
  background-position: center; /* 居中 */
}

HTML结构如下：

<div class="Box">
  <img src="avatar.jpg" alt="">
  <div class="delete-icon"></div>
</div>

通过添加一个空的.delete-icon元素来实现“删除”图标的展示。一个典型的CSS实现可以看起来如下所示：

现在，当用户将鼠标移至图片右上角时，“删除”图标就会出现在图片上方。如果用户单击该图标，它就会触发删除事件。