css点叉号 图片消失

当我们在制作网页时，经常会遇到需要在图片上添加一些标记的情况。这时我们可以使用CSS的点叉号来实现。

点叉号是CSS中一个常见的伪元素，它可以在指定元素的内容前面或后面添加一个小点或叉号，用于强调或表示不同状态。在这里，我们将使用点叉号来使图片消失。

/* 首先，我们需要为包含图片的元素设置定位 */
img-container {
  position: relative;
}
/* 接着，使用伪元素 ::before 或 ::after 在元素内添加一个小叉号 */
img-container::before {
  content: "×";
 /* 添加一个 Unicode 编码为 U+00D7 的叉号 */
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
 /* 调整叉号的大小 */
}
/* 最后，为伪元素绑定点击事件，在点击时隐藏图片 */
img-container::before {
  cursor: pointer;
}
img-container::before:hover {
  color: red;
 /* 当鼠标悬停在叉号上时，改变颜色以提示用户 */
}
img-container::before:active {
  color: green;
 /* 当用户点击叉号时，将颜色改为绿色 */
}
img-container::before:focus {
  outline: none;
 /* 移除叉号的焦点状态，避免影响用户体验 */
}
img-container::before:active + img {
  display: none;
 /* 隐藏包含的图片元素 */
}
 

通过以上代码，我们就可以实现一个简单的点击图片消失的效果。