Question

我为a userscript for another Stack site制作了一些小图标精灵。它使用a sprite sheet将一些图标元素嵌入到页面中，看起来像 Magic：Gathering 法术力符号。最后的代码片段是其输出的样本。

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

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

（至少，它在Windows上以Chrome和Firefox的方式运行。）

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

如果需要不同的HTML输出，这是可以的，但我想保持基本的精灵表机制完整（加载一个图像，不超过一个）。如果输出发生了变化，它仍然应该将精灵的明文替代品复制到剪贴板。

＆＃13;

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 }

＆＃13;

try selecting, copying and pasting these: &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;

＆＃13;

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

您可以使用的资源：

32px sprite的精灵表：https://i.stack.imgur.com/kF1U5.png，缩小尺寸并打包到样本中的16px精灵元素中。
16px精灵，实际上并未使用：https://i.stack.imgur.com/eyrtu.png
一个SVG精灵表，默认为16px sprite：http://svgur.com/i/Mg.svg

_{图片资产信用：由我编辑的用户图。由micku on github创建的大多数符号依次基于Goblin Hero and skibulk of Slightly Magic的工作。能源符号ahkren of Slightly Magic。}

Answer 1

事实证明，<img>元素在过去几年中已经发展为spriting。基于Robin Rendle's guide on CSS Tricks，我已经能够使用对象位置重新创建所需的效果。

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

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

2 个答案: