在文本选择时显示背景图片

我们过去在这些方面做了一些有趣的关于文本选择的事情。 我们制作了一个 秘密消息生成器。 我们制作了一个东西来模拟只选择 一定数量的字符。

在论坛中，Aaron Silber 想知道 使用文本选择来显示实际的图片。 我们知道，使用 CSS 可以更改选中文本的背景颜色，例如 此

::-moz-selection { background-color: #FFA; }
::selection { background-color: #FFA; }

但是，可以使用这些伪选择器使用的实际属性非常有限¹。 Background-image 在任何支持这些文本选择伪选择器的浏览器中都不受支持。 Aaron 制作了一个 测试页面 来查看哪些属性支持 ::selection。 本质上，color 和 background-color 是唯一支持的属性。

那我们放弃吗？ 当然不是！ 事实证明，JavaScript 中有一个 range 对象（更多信息），它有一个 API 用于获取（并在较小程度上设置）有关用户当前选择的文本的信息。 利用这种能力，我们可以找出选择的内容，用 span 将其包围起来，并使用这些跨度（没有继承样式限制）进行样式设置。 事实证明，跨浏览器的兼容性并不理想，但是有一个名为 Rangy 的开源项目，它可以使使用范围更轻松且更具跨浏览器兼容性。

一个基本的演示（来自他们的文档）涉及在点击按钮后在选定文本周围设置一个类

<script>
    var cssApplier;

    window.onload = function() {
        rangy.init();
        cssApplier = rangy.createCssClassApplier("someClass", true); // true turns on normalization
    });
</script>

<input type="button" value="Toggle someClass on selection" onclick="cssApplier.toggleSelection();">

有了这个，您将获得一个 CSS 类（上面的代码中的“someClass”），可以根据您的需要对其进行样式设置。

.someClass {
   background-image: url(raptor-attack.png);
}

显然，添加猛禽是最棒的想法。

查看演示   下载文件

---

¹ 并且 ::selection 已从规范中删除，因此没有浏览器遵守的标准。