1

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

<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 解决方案来完成这项工作。我在等你宝贵的答案。

4

3 回答 3

2

这对我有用：

<span style="display:inline-block; width:0px; height:0px; overflow:hidden">\**I can not be seen, but will be copied!**</span>
于 2014-11-29T18:24:48.410 回答
1

如果窗口处于活动状态，它可以在 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;
}
于 2012-03-27T13:39:07.710 回答
1

这个页面似乎有解决方案：

p::-moz-selection { color: transparent }
p::-webkit-selection { color: transparent }
于 2012-03-19T15:44:13.263 回答