css 图片上显示x

CSS是一种用于控制网页样式的语言，其中有一种技巧是在图片上显示X，这可以用于标记图片无法加载的情况。

img {
  position: relative;
  width: 100%;
}

img:before {
  content: "X";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  font-size: 50px;
  color: red;
}

首先，在CSS中，我们将图片的位置设为相对定位，以便在其上方添加绝对定位的伪元素。然后，我们使用“before”伪元素添加一个文本“X”，并将其显示为块级元素。接着，我们将“before”元素的位置设置为图片区域的上下左右，使用文本对齐方式使“X”居中，并将其字体大小设为50像素，颜色为红色。这样，当图片无法加载时，“X”将出现在其上方。

需要注意的是，使用这种技巧会占用图片的位置。如果不希望出现这种情况，可以将伪元素的“z-index”设置为负数，使其位于图片下方。