如何使用 ::after / ::before 伪元素更改内容 url 图片的大小答案

【问题标题】：How do I change size of content url picture using ::after / ::before Pseudo-element如何使用 ::after / ::before 伪元素更改内容 url 图片的大小
【发布时间】：2020-03-13 03:15:51
【问题描述】：

首先是我要更改的代码。

<style>
  h1::after {
    content: url(sig01.png);
  }
</style>

第二个是我尝试过的，但没有用。

<style>
    h1::after {
        content: url(sig01.png);
        display: inline-block;
        width: 200px;
        height: 200px;
    }
</style>

我做错了什么？

【问题讨论】：

您无法通过直接在内容中使用图像来做到这一点。您可以将图像设置为背景，然后改为操作背景大小。示例请参考stackoverflow.com/a/8978010/3345535。
请阅读minimal reproducible example 并相应地编辑您的帖子。很难理解什么是确切的问题？你试过什么？你有什么错误？如果有的话，数据样本是什么等等等等。帖子中缺少的东西。还伴随着这件事更详细地说明了问题。
代码格式化。

标签： html css

【解决方案1】：

您无法调整内容图像的大小，但您可以使用 background-image 而不是 content。

<style>
h1::after {
  content: '';
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url(sig01.png);
  background-size: 200px;
}
</style>

【讨论】：