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

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

与其只更改文本和背景颜色，我想让“覆盖”看起来像是真的由毡笔涂抹而成，带有不整齐的边缘等特点。

有没有任何建议可以做到这一点？我真的希望尽可能保持我的XHTML的纯粹性，并尽可能多地将其放入CSS中。

[编辑：已编辑文本的示例]

这篇维基百科文章提供了几个真实的已编辑文本示例。第一个示例非常粗糙（我认为太过粗糙）。第二个示例显示了过度的编辑量，但您可以看到“标记”不是直/干净的。

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

我也找到了这个例子：

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

- tig

---

使用 <del> ... </del> 而不是 <span class="redacted"> ... </span> 以保持你的 XHTML 语义化，如何？ - Sinan Ünür

@SinanÜnür，非常好的建议；在语义上是有意义的。但是对于格式化没有帮助。 - tig

这就是为什么它在注释中的原因。 - Sinan Ünür

Answer 1

如果您只是在论坛或网页中为了好玩而使用一些文本，可以直接使用Unicode字符'FULL BLOCK'(U+2588) █ ...然后将其复制粘贴到句子中████████以使其看起来像被删减的材料。

如果这对您有所帮助。

- RegCliff

---

这是“实心块”字符的实际HTML十进制实体代码，可以直接放入网页中：█。 - Pierz

但是提问者希望“观众能够突出显示文本并查看背后的真实内容”。 - equin0x80

Answer 2

我不确定您是否想要的效果，但是我混合了一些细微的样式，使其看起来像标记划掉了文字，略微具有“不完美”外观：

演示（适用于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; 可以防止跨行断开（即不换行）。

如果您想使用单个图像并走图片路线，可以利用 CSS3 的 background-size 属性将其拉伸到整个 span 元素上。

- Wesley Murch

---

+1：这是一个非常新颖的概念，绝对符合要求，而且是一个很棒的解决方法（在我看来）。 - Nightfirecat

太棒了！这可能会奏效。我得去深入研究如何实现跨平台。 - tig

还有其他人对如何使用图片（而不是拉伸单个图片）有什么想法吗？ - tig

@tig：在您的帖子中添加一个示例图像，可能会有人知道如何做到这一点。我们可能会想象与您所想的不同的东西。 - Wesley Murch

Answer 3

使用background-image: url('图片位置.png');在元素上设置一个平铺的背景图像，看起来像毛毡笔。

- Ry-

---

我不明白一个单瓷砖图像如何代表可变长度的毛毡笔记号的所有4个侧面。我认为我需要至少3个图像（左、中、右），其中中间可以根据跨度重复。另外，跨行的单词怎么办？ - tig

@tig: 将它们分开。至于四个边，你应该对旁边的元素使用 :before 和 :after，可平铺图片的顶部和底部可以有不整齐的边缘。要合理地支持多种浏览器。实现你想要的唯一方法是使用一个 hack（技巧）。 - Ry-

Tileable绝对不是一个单词，不是的。 - Hashim Aziz

无论如何都不是英语单词。可能是盖尔语。 - Hashim Aziz