文本上的透明 div答案

【问题标题】：Transparent div over text文本上的透明 div
【发布时间】：2012-01-23 04:44:07
【问题描述】：

如何在文本上放置（透明）图像以防止其被选中？我希望我的学生输入他们看到的内容，而不仅仅是复制/粘贴。

我不担心他们查看源代码并从那里复制/粘贴 - 如果他们那么精明，我不需要担心他们知道材料。

【问题讨论】：

我们应该猜测您使用的标记吗？
也许您可以让文本无法选择？ stackoverflow.com/questions/2310734/…

标签： css

【解决方案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.

【讨论】：

当大卫。这是一个非常完整的答案。非常感谢！
谢谢，很高兴能帮上忙。 =)

【解决方案2】：

这可以使用 z-index 以更简单的方式完成吗？例如。透明图像的 z-index 值较高。

这是您提出的一个有趣的概念，尽管可能不符合网站可访问性的“精神”:-)

【讨论】：