文本上的透明 div

Posted 2023-03-06

【中文标题】文本上的透明 div

【英文标题】：Transparent div over text

【发布时间】：2012-01-23 04:44:07

【问题描述】：

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

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

【问题讨论】：

我们应该猜测您使用的标记吗？

也许您可以让文本无法选择？ ***.com/questions/2310734/…

【参考方案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 值较高。

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