CSSで「編集済み」/「ブラックアウト」スタイルを作成していますか？

Question

私は著者は次のようにマークアップ記述できるようになるCSSスタイルを作成します：

On <span class="redacted">September, 10 2011</span> the special operations agent, 
<span class="redacted">John Smith</span>, on orders from his commanding 
officer, <span class="redacted">Captain Kirk</span>, terminated the well known 
terrorist <span class="redacted">Fred Flinstone</span>. 

私は現在、非常に単純なローテクな方法で仕事をしていません。このようなスタイルがあります。

span.redacted { 
    color: black; 
    background-color: black; 
} 

を

1つの要件は、です。視聴者がテキストを強調表示し、実際のコンテンツを「後ろに」見ることができるようにすることです。だから、イメージを使うだけではうまくいきません。

私の現在のスキームでは、背景の色を&のように変更するのではなく、実際にフェルトチップによって適用されたように見えます。ぼんやりしたエッジやもので。

どのようにこれを行うことができますか？私は本当に私のXHMTLを可能な限り純粋なものにして、できるだけ多くのものをCSSに入れたいと思っています。

[EDIT：編集済みテキストの例]

このWikipediaの記事は、実際の編集さテキストのいくつかの例を提供します。最初の例は本当にラフです（あまりにも荒いと思います）。 2つ目は過剰な量の修正を示していますが、「マーカー」がまっすぐ/きれいでないことがわかります。

http://en.wikipedia.org/wiki/Sanitization_(classified_information)

Iは同様にこの例が見つかりました：フェルトペンのように見えるbackground-image: url('location-of-the-image.png');を使用して要素に背景画像（タイル化）を設定

http://2.bp.blogspot.com/_mJPzxRaCL64/S4X6Zn0MPKI/AAAAAAAAJdw/vX4MYNdUyIk/s400/ishot-2064.jpg

Answer 1

これがあなたの後ろにある効果であるかどうかはわかりませんが、ちょっとした微妙なスタイルが混じっていて、マーカが単語を横切っているように見えます。少し不完全です。 （Firefox用）

デモ：あなたはクロスブラウザ何かにこれを翻訳する必要がありますhttp://jsfiddle.net/vzC96/2/

：

.redacted { 
    color: black; 
    background-color: black; 
    white-space:nowrap; 
    -moz-transform: rotate(.8deg) skewx(-12deg); 
    -moz-box-shadow:3px 0 2px #444; 
    border:1px dotted #555; 
    background: -moz-linear-gradient(180deg, #000, #222); 
} 

/* Add a few more selectors with slightly varying styles */ 
.redacted:first-child { 
    -moz-transform: rotate(-.8deg); 
} 
.redacted:first-child + .redacted { 
    -moz-transform: rotate(3deg); 
} 

/* "Highlighter" effect */ 
.redacted::-moz-selection { 
    background:#e6ff3f; 
} 

それは同様にテキスト自体を歪曲し、それので、それが正常に隠されていますあなたにとって重要ではないかもしれません。

white-space:nowrap;は、スパンが破損しないようにするものです（改行する）。

画像ルートに移動して1つの画像を使用する場合は、CSS3のbackground-sizeを利用してスパン全体に広げることができます。

Answer 2

を。

Answer 3

あなたのページのフォーラムや他のテキストで楽しいことをしているのなら、Unicode Character 'FULL BLOCK'（U + 2588）█...を使用して、それをコピーして████████は編集された資料のように見える。

これが役立つ場合は、