是否存在CSS规则，用于将内容放置在元素中并进行定位? [英] Do CSS rules exist for placing content within elements and positioning them?

问题描述

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

Do CSS rules exist for placing content such as images or text within elements?

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

eg. say I have a div which can contain some info which is correct and some info which is wrong, can I have rules such as:

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

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

是否也可以放置它们?

推荐答案

您可以使用伪元素( ::before 和 ::after ).使用 content 属性设置文本图片作为伪元素或背景 >:

You can use pseudo elements (::before and ::after). Set the text using the content attribute, and the image as the background of the pseudo element or the 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>

这篇关于是否存在CSS规则，用于将内容放置在元素中并进行定位?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！