是否存在CSS规则来将内容放置在元素中并进行定位？

Question

是否存在CSS规则，用于在元素内放置图像或文本等内容？

例如说我有一个div，其中可以包含一些正确的信息和一些错误的信息，我可以使用以下规则吗？

.correct {
  img: greenTick.jpg;
  text: "answer is wrong"
}

.wrong {
  img: redX.jpg;
  text: "answer is correct"
}

是否也可以放置它们？

Answer 1

您可以使用pseudo elements（::before和::after）。使用content属性设置文本，并将图像设置为伪元素的background或div：

.correct::before {
  padding: 1em;
  background: url(https://picsum.photos/200/100);
  background-size: contain;
  color: white;
  content: "answer is correct"
}

.wrong::before {
  padding: 1em;
  background: url(https://picsum.photos/200/200);
  background-size: contain;
  color: white;
  content: "answer is wrong"
}

<div class="correct"></div>

<br><br>

<div class="wrong"></div>

Answer 2

CSS background-image属性将是您需要使用的属性，而不是img。参见下面的示例，了解如何同时使用这两种样式类：

.correct {
    background-image: url("greenTick.jpg");
}

.wrong {
    background-image: url("redX.jpg");
}