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-index以更简单的方式完成吗？例如。透明图像的z-index值更高。

这是一个你提出的有趣概念，虽然可能不是“网站可访问性的精神”： - ）

透明div文本

2 个答案: