如何使 sprite 元素看起来像普通文本一样被选中?

How can I make a sprite element look selected like regular text?

我为 a userscript for another Stack site. It embeds some icon elements onto the page that look like the Magic: the Gathering mana symbols using a sprite sheet 制作了一些小图标精灵。最后的代码片段是其输出的示例。

所有图标都包含一个隐藏的文本元素(使用 Bootstrap's .sr-only),它是符号的纯文本等价物。这意味着您可以 select 它们周围的文本,然后复制并粘贴它们以获得有用的纯文本!例如,如果我 运行 下面的代码片段,突出显示以下内容,然后按 CTRL+C:

然后我将 these: → {W} {U} {B} {R} {G} ← 复制到我的剪贴板并可以将其粘贴到其他地方。这非常有用,而且正是我想要发生的事情。 但是, 这些符号 看起来 不像它们即使它们是 - 所有文本都明显突出显示,符号本身却没有 - 这对用户来说很奇怪,并且对我更喜欢的用户体验造成令人困惑的损害克服。如果它被 select 编辑成可以复制和粘贴的样子,它应该看起来像这样。

(至少,它在 Chrome 和 Windows 上的 Firefox 中是这样工作的。)

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

如果需要不同的 HTML 输出也没关系,但我想保持基本精灵 sheet 机制完整(加载一张图像,不要超过一张)。如果输出发生变化,它仍应将 sprite 的明文替代品复制到剪贴板。

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;

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

可供您使用的资源:


图片资产来源:由我为用户脚本编辑。大多数符号由 micku on github, in turn based on the work of Goblin Hero and skibulk of Slightly Magic. Energy symbol by ahkren of Slightly Magic.

创建

一个选项是使用 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: &rarr;
<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;

事实证明,<img> 元素在过去几年中已经发展为 spriting。基于 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>