Выбор скрытого текста с помощью CSS - PullRequest
Новая
       38

Выбор скрытого текста с помощью CSS

1 голос
/ 19 марта 2012

Есть рукописная книга. Мне нужно опубликовать эту книгу на сайте. У меня есть текстовая версия этой книги, и у меня есть позиции букв на странице. Я пытаюсь позволить пользователям выбирать текст поверх изображения страницы. Но пользователи должны видеть только изображение страницы рукописи. Я сделал небольшой обходной путь, как это: 

<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 для этой работы. Я жду ваших драгоценных ответов.

Ответы [ 3 ]

1 голос
/ 29 ноября 2014

Это сработало для меня: 

<span style="display:inline-block; width:0px; height:0px; overflow:hidden">\**I can not be seen, but will be copied!**</span>
0 голосов
/ 27 марта 2012

Если окно активно, оно работает на 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;
}
0 голосов
/ 19 марта 2012

Кажется, что эта страница имеет решение: 

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