Question

您好，我想在文本上放一个小图标图像。例如，我的意思是：

Our Customer Is Our King. <img border="0" alt="W3Schools" src="https://png.pngtree.com/svg/20170904/the_golden_crown_309708.png" width="40" height="25">

我希望金色王冠的图标位于King文字上方。

Answer 1

可以使用position:relative;和position:absolute和right: top:值。

.textwrap {
  position:relative;
  display:inline-block;
  margin-top:20px;
}

.textwrap img {
  position:absolute;
  right:-2px; /* it's up to you */
  top:-17px; /* it's up to you */
}

<div class="textwrap">
Our Customer Is Our King. <img border="0" alt="W3Schools" src="https://png.pngtree.com/svg/20170904/the_golden_crown_309708.png" width="40" height="25">
</div>

Answer 2

有几种方法可以做到这一点。就语义而言，最好的办法是使用:after伪元素并将其放在文本上。

#text {
  display: inline-block;
  position: relative;
}
#text:before {
  width: 30px;
  height: 30px;
  position: absolute;
  top: -18px;
  left: 80%;
  background-image: url(https://png.pngtree.com/svg/20170904/the_golden_crown_309708.png);
  background-size: 100%;
  content: "";
}

<span id="text">Our Customer Is Our King.</span>

Answer 3

Our Customer Is Our King.<img style='position:relative;right:40px;bottom:5px;' border="0" alt="W3Schools" src="https://png.pngtree.com/svg/20170904/the_golden_crown_309708.png" width="40" height="25">

复制粘贴上面的代码。

如何在文本上放置一个小图标？

3 个答案: