html - 在 CSS 中创建 "redacted"/"black-out"样式？

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;
}

一个要求是我希望观众能够突出显示文本并看到“背后”的真实内容。所以仅仅使用图像是行不通的。

我希望“涂黑”看起来像是真的用毡尖笔应用的，而不是我目前仅更改文本和背景颜色的方案。有参差不齐的边缘和东西。

关于如何做到这一点有什么建议吗？我真的很想尽可能保持我的 XHMTL 的纯净，并尽可能多地把它放到 CSS 中。

[编辑:编辑文本的示例]

这篇维基百科文章提供了几个真实的编辑文本示例。第一个例子真的很粗糙(我认为太粗糙了)。第二个显示编辑过多，但您可以看到“标记”不直/不干净。

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

我也找到了这个例子:

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

Answer 1

如果您只是为了在论坛或页面中的某些文本中玩乐，您可以使用 Unicode 字符“FULL BLOCK”(U+2588) █ ...然后将其复制并粘贴到一个句子中████████ 看起来像经过编辑的 Material 。

如果这对你有帮助。