可否内容：“”；有图像标签还是说图像？答案

【问题标题】：Can the content:" "; have an image tag or say an image?可否内容：“”；有图像标签还是说图像？
【发布时间】：2016-08-26 18:50:54
【问题描述】：

好的，所以我一直在做研究，但仍然无法弄清楚 'content:" ";'可以包含任何机会的图像。

我不知道我的问题是否合适。但很高兴知道它是否可以包含图像链接。谢谢。

例如我有一个图片标签为：

<img src="kitten.jpg">

我可以在内容属性中添加这张图片吗？

:after {
  content:" ";
}

【问题讨论】：

标签： html css image pseudo-element

【解决方案1】：

来自http://www.w3schools.com/cssref/pr_gen_content.asp，content的属性值：

url(url) | Sets the content to be some kind of media (an image, a sound, a video, etc.)

所以这会起作用：

.yourDiv:after { 
content: url('image-src'); 
}

示例 sn-p：

p:after {
  content: url('https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4');
  }

<div>
  <p>Some Stuff</p>
</div>

【讨论】：

请检查已编辑的问题，如果可能，请告诉我。
是的，只需使用正斜杠从您的服务器根目录开始，然后输入图像在您服务器上的任何位置的路径。例如：content: url('/images/kitten.png');.

【解决方案2】：

CSS content 可以包含文本或...图像。

.seb-example:before {
    content: url('http://placekitten.com/250/250');
}

虽然，我更喜欢将background-image 用于:before（或:after），因为它可以让我更好地控制大小（使用background-size）。但在极少数情况下，我发现它很有用。

【讨论】：

【解决方案3】：

你为什么不试试呢？

您可以使用url 显示图像。 content 属性将包含任何 html 内容

请参阅下面的示例：

div,
div:after {
  display: inline-block;
  vertical-align: top;
}
div:after {
  content: url(http://placekitten.com/250/250);
}

&lt;div&gt;image&lt;/div&gt;

【讨论】：

如果 img src 只是一个名字，比如
我猜你不能在 content 属性中包含标记（元素）——你必须使用 url 来实现这一点……url(mountains.jpg) 可以工作
实际使用小猫值得+1。