Прозрачный div над текстом

Question

Как вы помещаете (прозрачное) изображение поверх текста, чтобы оно не было выбрано? Я хочу, чтобы мои ученики печатали то, что они видят, а не только копировать/вставлять.

Я не беспокоюсь о том, что они просматривают источник и копируют/вставляют оттуда - если они такие сообразительные, мне не нужно беспокоиться о них, зная материал.

Answer 1

Я не считаю, что это отличная идея, и она не будет работать особенно хорошо. Кроме того, не видя, какие элементы вы используете, я собираюсь угадать, со следующим:

<p>Something not to copy...<img src="path/to/image.png" /></p> 

CSS:

p { 
    position: relative; 
} 

p img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
} 

JS Fiddle demo.

Немного более легкий путь:

p { 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 

JS Fiddle demo.

Несколько более надежный способ (который не опирается на обновленных/«современных» браузеров, но не запрашивается в вашем вопросе, так как он использует JavaScript:.

var paras = document.getElementsByTagName('p'); 

for (var i=0, len=paras.length; i<len; i++){ 
    paras[i].onmousedown = function(){ 
     return false; 
    }; 
} 

JS Fiddle demo

Answer 2

Это можно сделать проще с помощью z-индекса? Например, более высокое значение z-индекса для прозрачного изображения.

Это интересная концепция, которую вы предлагаете, хотя, возможно, не «в духе» доступности веб-сайта:)