Question

有一本手稿。我需要在网站上发布这本书。我有本书的文字版本，我在页面上有字母位置。我试图让用户选择页面图像上的文字。但用户必须只看到手稿页面图像。我做了一些像这样的解决方法：

<div style="background:url(manuscript_page_with_text.jpg)">
    <p style="color: transparent; position: relative; top:...px; left:...px">The text of the page</p>
</div>

我可以将此透明文本移动到页面图像上的确切位置，该图像包含文本的原稿版本。但是，当我选择文本时，它会显示在页面图像上。

当用户选择图像上的文本时，他/她必须仅在图像上看到选择颜色，并且实际上必须选择隐藏文本。通过这种方式，用户可以使用ctrl + c等文本操作。

我需要一个CSS或Javascript解决方案来完成这项工作。我在等你的宝贵答案。

Answer 1

这对我有用：

<span style="display:inline-block; width:0px; height:0px; overflow:hidden">\**I can not be seen, but will be copied!**</span>

Answer 2

似乎this page有解决方案：

p::-moz-selection { color: transparent }
p::-webkit-selection { color: transparent }

Answer 3

如果窗口处于活动状态，则它适用于webkit和mozilla。但是如果窗口处于非活动状态，则它仅适用于webkit。 Firefox有一个错误。完全忘记了IE，所以我必须尝试在javascript中实现它。

p::selection {
    background:#cc0000;
    color: transparent;
    opacity: 0.5;
}
p::-moz-selection {
    background:#cc0000;
    color: transparent;
    opacity: 0.5;
}
p::-webkit-selection {
    background:#cc0000;
    color: transparent;
    opacity: 0.5;
}

p::selection:window-inactive {
    background:#cc0000;
    color: transparent;
    opacity: 0.5;
}
p::-moz-selection:window-inactive {
    background:#cc0000;
    color: transparent;
    opacity: 0.5;
}
p::-moz-selection:-moz-window-inactive {
    background:#cc0000;
    color: transparent;
    opacity: 0.5;
}
p::-webkit-selection:window-inactive {
    background:#cc0000;
    color: transparent;
    opacity: 0.5;
}

使用CSS选择隐藏文本

3 个答案: