在 ::before 选择器中添加图像

Question

我想在段落开始之前添加一个引号图标，因为我在其他一些网站上看到过这样做。

所以我尝试使用

width

、

height

和

font-size

属性 - 但我不知道如何缩小该图像以适应段落的大小。

这是 QM 图标：

这是代码：

.article {
  padding-top: 2%;
}

.article::before {
  content: url(https://i.sstatic.net/mdeKRzYD.png);
  display: inline-block;
  /* top: 4px; */
  /* float: left; */
  /* width: 13px; */
  font-size: 10px;
}

<div class="article">
  <p>Blah blah blah, some text to fill the space.</p>
</div>

Answer 1

对于 PNG 图像来说，使用

background-image

而不是

content

似乎是更好的选择。

首先，使用类

.article

在父段落中设置字体大小，然后使用position: relative创建一个新的

包含块

。要为引号留出一些空间，请将 text-indent 设置为 1em。使用 em 单位意味着它将随着字体大小缩放。

在 ::before 伪元素上，将背景图像的大小设置为与主要文本相同的字符大小，再次使用 em 单位与父级一起缩放。

使用 position:absolute 可以将引号从父元素流中取出，并使用

top

和

left

将其放置在您想要的位置。

.article {
  /*padding-top: 2%;*/
  position: relative;
  display: inline-block;
  font-size: 50px;
  text-indent: 1em;
}

.article::before {
position: absolute;
  /*content: url(https://i.sstatic.net/mdeKRzYD.png);*/
  content: "";
  background-image: url(https://i.sstatic.net/mdeKRzYD.png);
  background-size: 100% 100%;
  position: absolute;
  top: 0.5em;
  left: 0em;
  width: 1em;
  height: 1em;
}

<div class="article">
  <p>Blah blah blah, some text to fill the space.</p>
</div>