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）█...然后将其复制并粘贴到一个句子中████████看起来像是编辑过的材料。

如果那对你有所帮助。

Answer 2

我不确定这是否是你所追求的效果，但我只是混合了一堆微妙的风格，使它看起来像一个标记已经划掉了单词，略显“不完美”的样子： / p>

演示（适用于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并在整个范围内拉伸它。

Answer 3

使用看起来像毡尖笔的background-image: url('location-of-the-image.png');在元素上设置背景图像（tileable）。

在CSS中创建“编辑”/“黑屏”样式？

3 个答案: