如何使 span 看起来像 img？答案

【问题标题】：How to make span look like img?如何使 span 看起来像 img？
【发布时间】：2018-08-31 11:03:20
【问题描述】：

我们如何将 span 元素设为 img 元素？更准确地说，我们如何才能做到这一点，

<span src='https://abs.twimg.com/emoji/v2/72x72/1f607.png'></span>

当我们将表情符号放在 textarea 中时，我在 twitter 消息栏中看到了这个概念。感谢您的时间和体谅。请看一下，我会很高兴的。

编辑-1

这个问题不是关于使用背景图片。我们可以像推特人那样有其他选择吗？这是我在推特页面上看到的。

<span class="RichEditor-pictographText" title="Smiling face with halo" aria-
label="Emoji: Smiling face with halo" data-pictograph-text="????" data-
pictograph-image="https://abs.twimg.com/emoji/v2/72x72/1f607.png">&emsp;
</span>

这些线条使图像看起来像没有背景图像。

【问题讨论】：

span 元素在 HTML 中没有有效的 src 属性。但是使用 javascript 你可以用它做一些事情
这个stackoverflow.com/questions/3793090/…怎么样？
在推特上他们使用的是data标签而不是src。 data-pictograph-image="https://abs.twimg.com/emoji/v2/72x72/1f62c.png"

标签： javascript jquery html image user-interface

【解决方案1】：

您可以在类背景中设置它并将该类添加到跨度中

.icon {
  background: url("https://abs.twimg.com/emoji/v2/72x72/1f607.png") no-repeat;
  width: 100px;
  display: inline-block;
  height: 100px;
}

&lt;span class='icon'&gt;&lt;/span&gt;

【讨论】：

感谢您的回复@brk。我编辑了这个问题。编辑部分有更多细节。在这种情况下我们能做些什么.. 任何帮助。

【解决方案2】：

span 没有分配图像的属性，除了使用style 属性的background-image，它不会将span 调整为图像的大小（如img确实）。

一种可能的解决方法是使用data-src 之类的自定义属性，可以使用脚本和insertRule()，并向样式表添加一个伪类。

var span = document.querySelector('span[data-src]');
var src = span.dataset.src;
document.styleSheets[0].insertRule('span[data-src]::before { content: url('+src+'); }', 0);

span {
  border: 1px dashed gray;
  display: inline-block;
}

&lt;span data-src='https://abs.twimg.com/emoji/v2/72x72/1f607.png'&gt;&lt;/span&gt;

另一种可能的方法是将img 动态插入span。

谈到 Twitter 的做法，我猜他们使用类似的自定义属性，用于根本不支持表情符号的浏览器（或阅读器），例如 &emsp; 和/或自定义字体。

【讨论】：

【解决方案3】：

你可以这样做

#abc
{ 
   background:url(http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1) left top; 
   width:50px; 
   height:50px;
   display: block;
   float: left;
}

<span id="abc" class="abc">


</span>

【讨论】：