用CSS選擇隱藏文本

有一本手稿書。我需要在網站上發佈這本書。我有本書的文本版本，並且在頁面上有信件位置。我試圖讓用戶在頁面圖片上選擇文字。但用戶只能看到原稿頁面圖像。我做了一些變通方法類似：用CSS選擇隱藏文本

<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解決方案來完成這項工作。我在等你寶貴的答案。

來源

2012-03-19 oruchreis

我的jsfiddle將真正幫助，或者重寫你的問題，我失去了一半的方式進入它只是因爲它是怎麼寫的。 – SpYk3HH 2012-03-19 15:27:53

因此，您正在展示本書的圖像，並顯示了實際文字的疊加層，但文字不可見。您希望能夠拖動鼠標來選擇文本並顯示選擇區域，但不顯示突出顯示的文本？我是否正確？ – 2012-03-19 15:28:30

好像this page有解決方案：

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

來源

2012-03-19 15:44:13 gcbenison

如果窗口是活動的，它適用於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-27 13:39:07 oruchreis

這爲我工作：

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

來源

2014-11-29 18:24:48 iantresman

用CSS選擇隱藏文本

回答

相關問題