使用图像创建网页，但在复制和粘贴时将图像替换为文本

Question

我有一些 HTML，其中包含消息和表情符号。一个表情是这样写的：

<img src='client/img/tongueout.gif'>

但是当我将它复制并粘贴到其他东西时，表情符号被删除，我失去了表情。相反，我想在文本中添加一个 :P 来代替图像。我尝试使用替代文本，但没有成功。有没有办法做到这一点？

Answer 1

您必须将替代文本放在表情符号图标旁边，但可以通过使用特殊的 css 样式以某种方式隐藏它。

display:none 或 visibility:hidden 之类的样式将不起作用，因为它们会在您复制粘贴网页时从文本中删除！为此，您应该使用一些 CSS，例如 clip: rect(0,0,0,0) 或 opacity:0，如下演示：

img.emoji { width:20px; height:20px; }

.emojiText {
  display: inline-block; 
  position: absolute;
  clip: rect(0,0,0,0);
}

<p>Copy-Paste the following line into a text editor, <br/>
  you should see ":D)" instead of the image icon:</p>

<div>First word, 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png" class="emoji">
<span class="emojiText">:D)</span>, Second Word</div>