如何使sprite元素看起来像常规文本?

I've made some small icon sprites for 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. The code snippet at the end is a sample of its output.

我为另一个堆栈站点的用户脚本创建了一些小图标精灵。它将一些图标元素嵌入到页面上，看起来像魔术:使用精灵表格收集法力符号。最后的代码片段是其输出的一个示例。

All of the icons contain a hidden text element (using Bootstrap's .sr-only) which is the plain text equivalent of the symbol. This means you can select the text around them, and copy and paste them to get useful plain text! For example if I run the code snippet below, highlight the following, and press CTRL+C:

所有的图标都包含一个隐藏的文本元素(使用引导程序的. sronly)，它是与符号等价的纯文本。这意味着您可以选择它们周围的文本，并复制和粘贴它们，以获得有用的纯文本!例如，如果我运行下面的代码片段，突出显示以下内容，然后按CTRL+C:

Then I've copied these: → {W} {U} {B} {R} {G} ← onto my clipboard and can paste that elsewhere. This is pretty useful, and exactly what I want to happen. However, the symbols don't look like they're getting selected with the text around them even though they are — all the text is obviously highlighted, the symbols themselves are not — and this is weird for a user and a confusing detriment to user experience I'd prefer to overcome. If it's getting selected like it could be copied and pasted, it should look like it.

然后我复制这些:→{ W } {你} { B } { R } { G }←到我的剪贴板,可以粘贴在其他地方。这很有用，也正是我想要的。然而，这些符号看起来并不像它们周围的文字所选择的那样——所有的文字都是突出显示的，符号本身不是——这对于用户来说是奇怪的，对用户体验来说是一种令人困惑的损害，我宁愿去克服。如果它被选中，就像它可以被复制和粘贴一样，它应该看起来像它。

(At least, it works this way in Chrome and Firefox on Windows.)

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

How can I ensure these elements look like they're being highlighted just like regular text?

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

It is OK if different HTML output is required, but I would like to keep the basic sprite sheet mechanism intact (load one image, not more than one). If the output's changed, it should still copy plaintext alternatives to the sprites to your clipboard.

如果需要不同的HTML输出是可以的，但是我希望保持基本的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;

The script above packs a sheet of 32px sprites into a 16px element (using background-size to forcibly resize it). This provides support to high-resolution screens, e.g. retina, and people using their browser zoom. Maintaining this support (via high-resolution sprites or SVG) is optional but preferable.

上面的脚本将32px的子元素打包为16px元素(使用背景大小强制调整大小)。这为高分辨率屏幕提供了支持，例如视网膜，以及人们使用他们的浏览器缩放。维护这种支持(通过高分辨率的精灵或SVG)是可选的，但更好。

Resources available for you to use:

你可使用的资源:

• A sprite sheet of 32px sprites: https://i.stack.imgur.com/kF1U5.png, downsized and packed into the 16px sprite elements in the sample.
• 一个32px的精灵表:https://i.stack.imgur.com/kF1U5.png，压缩后装入样本中16px的精灵元素。
• 16px sprites, not actually currently used: https://i.stack.imgur.com/eyrtu.png
• 16px精灵，目前还没有使用:https://i.stack.imgur.com/eyrtu.png
• An SVG sprite sheet that defaults to 16px sprites: http://svgur.com/i/Mg.svg
• 一个默认为16px的SVG精灵表:http://svgur.com/i/Mg.svg

---

_{Image asset credits: Edited by me for the userscript. Most symbols created by micku on github, in turn based on the work of Goblin Hero and skibulk of Slightly Magic. Energy symbol by ahkren of Slightly Magic.}

图像资产信用:由我编辑的用户脚本。micku在github上创造的大多数符号，都是基于小妖精英雄的作品和略施魔法的skibulk。能量象征由阿克伦的微魔法。

2 个解决方案

#1

Turns out the <img> element has evolved for spriting over the past couple of years. Based on Robin Rendle's guide on CSS Tricks I've been able to recreate the desired effect using object-position.

事实证明，在过去的几年中，元素已经进化为spriting。基于Robin Rendle关于CSS技巧的指南，我可以使用对象位置重新创建所需的效果。

With this one I can use either the 16px sprites or the SVG sprites. I'm not sure how I'd pack the 32px sprites in, but with the SVG sprites available I don't think I have to worry about that.

有了这个，我可以使用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>

#2

One option is to use color: transparent; to hide the text instead of position: absolute; etc. You may still have to tweak the sizes, but it looks pretty good in my browser.

一种选择是使用颜色:透明;隐藏文本而不是位置:绝对;您可能还需要调整大小，但是在我的浏览器中看起来很不错。

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;