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

このページには解決策があるようです：

p::-moz-selection { color: transparent }
p::-webkit-selection { color: transparent }
于 2012-03-19T15:44:13.263 に答える
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 に答える