如何使精灵元素看起来像普通文本一样被选中？

Question

我为a userscript for another Stack site 制作了一些小图标精灵。它使用a sprite sheet 将一些图标元素嵌入到页面上，看起来像Magic: the Gathering 法力符号。最后的代码 sn-p 是它的输出示例。

所有图标都包含一个隐藏的文本元素（使用Bootstrap's .sr-only），它是符号的纯文本等效项。这意味着您可以选择它们周围的文本，然后复制并粘贴它们以获得有用的纯文本！例如，如果我运行下面的代码 sn-p，突出显示以下内容，然后按 CTRL+C：

然后我将these: → {W} {U} {B} {R} {G} ← 复制到我的剪贴板上，然后可以将其粘贴到其他地方。这非常有用，正是我想要发生的。 然而，这些符号并没有看起来看起来像被选中，周围有文字，即使它们是——所有文本都明显突出显示，符号本身没有——这对用户来说很奇怪，而且我更愿意克服对用户体验的混乱损害。如果它被选中，就像它可以被复制和粘贴一样，它应该看起来像它。

（至少，它在 Windows 上的 Chrome 和 Firefox 中是这样工作的。）

如何确保这些元素看起来像普通文本一样被突出显示？

如果需要不同的 HTML 输出是可以的，但我想保持基本的 sprite sheet 机制不变（加载一张图像，不超过一张）。如果输出发生更改，它仍应将精灵的纯文本替代项复制到剪贴板。

body {
  font-family: sans-serif;
}

.mana-symbol {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('//i.stack.imgur.com/kF1U5.png') no-repeat black;
  background-size: 169px;
  position: relative;
  top: 0.2em;
  box-shadow: 1px 1px 0px 0px #000;
  border-radius: 8px;
}

.mana-symbol .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.mana-symbol.W { background-position: -68px -34px }
.mana-symbol.U { background-position: -85px -34px }
.mana-symbol.B { background-position: -102px -34px }
.mana-symbol.R { background-position: -119px -34px }
.mana-symbol.G { background-position: -136px -34px }

try selecting, copying and pasting these: →
<span class="mana-symbol W"><span class="sr-only">{W}</span></span>
<span class="mana-symbol U"><span class="sr-only">{U}</span></span>
<span class="mana-symbol B"><span class="sr-only">{B}</span></span>
<span class="mana-symbol R"><span class="sr-only">{R}</span></span>
<span class="mana-symbol G"><span class="sr-only">{G}</span></span>
&larr;

上面的脚本将一张 32px 的 sprite 打包成一个 16px 的元素（使用 background-size 强制调整它的大小）。这为高分辨率屏幕提供了支持，例如视网膜，以及使用浏览器缩放的人。保持这种支持（通过高分辨率精灵或 SVG）是可选的，但更可取。

可供您使用的资源：

• 32 像素精灵的精灵表：https://i.stack.imgur.com/kF1U5.png，缩小尺寸并打包到示例中的 16 像素精灵元素中。
• 16px sprites，当前未实际使用：https://i.stack.imgur.com/eyrtu.png
• 默认为 16 像素精灵的 SVG 精灵表：http://svgur.com/i/Mg.svg

---

_{图像资产学分：由我为用户脚本编辑。大多数符号由micku on github 创建，反过来又基于Goblin Hero and skibulk of Slightly Magic 的工作。 ahkren of Slightly Magic的能量符号。}

Answer 1

事实证明，<img> 元素在过去几年中已经演变为精灵。基于Robin Rendle's guide on CSS Tricks，我已经能够使用 object-position 重新创建所需的效果。

有了这个，我可以使用 16px 精灵或 SVG 精灵。我不确定如何将 32px 的精灵打包进去，但有了可用的 SVG 精灵，我认为我不必担心这一点。

body {
  font-family: sans-serif;
}

.mana-symbol {
  object-fit: none;
  object-position: 0 0;
  width: 16px;
  height: 16px;
  box-shadow: 1px 1px 0px 0px #000;
  border-radius: 50%;
}

.mana-symbol.W { object-position: -68px -34px }
.mana-symbol.U { object-position: -85px -34px }
.mana-symbol.B { object-position: -102px -34px }
.mana-symbol.R { object-position: -119px -34px }
.mana-symbol.G { object-position: -136px -34px }

<p>try selecting, copying and pasting these: &rarr;
<img src="//i.stack.imgur.com/eyrtu.png" class="mana-symbol W" alt="{W}">
<img src="//i.stack.imgur.com/eyrtu.png" class="mana-symbol U" alt="{U}">
<img src="//i.stack.imgur.com/eyrtu.png" class="mana-symbol B" alt="{B}">
<img src="//i.stack.imgur.com/eyrtu.png" class="mana-symbol R" alt="{R}">
<img src="//i.stack.imgur.com/eyrtu.png" class="mana-symbol G" alt="{G}">
&larr;</p>

<p>SVG version &rarr;
<img src="http://svgur.com/i/Mg.svg" class="mana-symbol W" alt="{W}">
<img src="http://svgur.com/i/Mg.svg" class="mana-symbol U" alt="{U}">
<img src="http://svgur.com/i/Mg.svg" class="mana-symbol B" alt="{B}">
<img src="http://svgur.com/i/Mg.svg" class="mana-symbol R" alt="{R}">
<img src="http://svgur.com/i/Mg.svg" class="mana-symbol G" alt="{G}">
&larr;</p>

Answer 2

一种选择是使用color: transparent; 来隐藏文本而不是position: absolute; 等。您可能仍需要调整大小，但在我的浏览器中看起来不错。

body {
  font-family: sans-serif;
}

.mana-symbol {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('//i.stack.imgur.com/kF1U5.png') no-repeat black;
  background-size: 169px;
  top: 0.2em;
  box-shadow: 1px 1px 0px 0px #000;
  border-radius: 8px;
  color: transparent;
}

.mana-symbol.W { background-position: -68px -34px }
.mana-symbol.U { background-position: -85px -34px }
.mana-symbol.B { background-position: -102px -34px }
.mana-symbol.R { background-position: -119px -34px }
.mana-symbol.G { background-position: -136px -34px }

try selecting: →
<span class="mana-symbol W"><span class="sr-only">{W}</span></span>
<span class="mana-symbol U"><span class="sr-only">{U}</span></span>
<span class="mana-symbol B"><span class="sr-only">{B}</span></span>
<span class="mana-symbol R"><span class="sr-only">{R}</span></span>
<span class="mana-symbol G"><span class="sr-only">{G}</span></span>
&larr;