透明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小提琴演示.

一个稍微简单的方法:

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

JS小提琴演示.

一种稍微更可靠的方式(不依赖于更新的/'现代'浏览器,但在您的问题中未请求,因为它使用JavaScript:

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

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

JS小提琴演示.