テキストの透過的な分割

テキストを選択しないようにするには、どのように(透過的な)イメージを置くのですか? 私は生徒に、コピー/ペーストだけではなく、見るものを入力するようにします。

私は、彼らがソースを見て、そこからコピー/貼り付けをするのを心配していません。もし彼らが精通していれば、私は材料を知っていることを心配する必要はありません。

0
ありがとうbozdoz!それが助けになった!
追加された 著者 Phillip Senn,
使用しているマークアップを推測する必要がありますか?
追加された 著者 David Thomas,
おそらく、あなたは単にテキストを選択不能にすることができますか? 追加された 著者 bozdoz,

2 答え

私はこれが素晴らしいアイデアだとは思っていませんし、それは特にうまく機能しません。また、あなたが使用している要素を見ることなく、私は次のように推測するつもりです:

Something not to copy...

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

JS Fiddle demo.

6
追加された
Dang David。これは非常に完全な答えです。どうもありがとうございました!
追加された 著者 Phillip Senn,
あなたが "paras [i] .onmousedown = false"と言うことができるのだろうか?
追加された 著者 Phillip Senn,
ありがとう、助けになってうれしい。 =)
追加された 著者 David Thomas,
あなたの質問に答えて: いいえ
追加された 著者 David Thomas,

これはz-indexを使って簡単な方法で行うことができますか?例えば。透過画像のz-インデックス値が高くなります。

あなたが提案している興味深いコンセプトですが、おそらくウェブサイトのアクセシビリティの「精神」にはありません:-)

0
追加された