テキストの透明な部分

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。

Aもう少し信頼性の高い方法（つまり、更新/ '現代のブラウザに依存していないが、それは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-インデックス値を高くします。

ウェブサイトのアクセシビリティの「霊感」ではないかもしれませんが、 ）