内容可以：" ";有图像标签或说图像？

Question

好吧，我一直在研究，但仍然无法弄清楚 'content:" ";' 是否可以包含图像。

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

例如我有一个图片标签：

<img src="kitten.jpg">

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

:after {
  content:" ";
}

Answer 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'); 
}

示例片段：

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>

Answer 2

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

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

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

Answer 3

你为什么不试试呢？

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

参见下面的示例：

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

<div>image</div>

内容可以：" ";有图像标签或说图像？

Can the content:" "; have an image tag or say an image?

html

css

image

pseudo-element