css - 使隐藏文本的选择突出显示可见

标签 css image hidden textselection

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

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

最佳答案

这对我有用:

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

关于css - 使隐藏文本的选择突出显示可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9772867/

相关文章:

image - 将UIimage(拍照)转成NSData

javascript - 使用 Javascript 隐藏表格行

对用户隐藏的 C# 设置

html - CSS 计算宽度增加边距

image - 使用UL在垂直方向上居中图像并内嵌显示

c# - 如何将Word文档的所有页面保存为图片?

jquery - 当您使用 jQuery 单击图像/按钮时,从页面顶部向下滑动隐藏元素

css - 未读数据的 QTabBar 选择器

css - 如何删除 `clip-path` 的不可见部分?

javascript - 如何让一个 div 在到达另一个 div 时滑出和滑入