文本透明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-index更簡單的方式完成？例如，透明圖像的z-index值更高

這是一個有趣的概念，你可能並不是'網站可訪問性'的精神： ）