我想创建一个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中。

[编辑:修订文本示例]

这篇Wikipedia文章提供了一些实际的编辑文本示例。第一个例子确实很粗糙(我认为太粗糙了)。第二个显示了过多的编辑,但是您可以看到“标记”不是笔直的/干净的。

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

我也找到了这个例子:

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

最佳答案

我不确定这是否是您想要的效果,但是我只是混合了一些微妙的样式,以使其看起来像标记符使单词划掉了,看起来有点“不完美”:

演示(对于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并在整个范围内拉伸(stretch)它。

关于html - 在CSS中创建 “redacted”/ “black-out”样式?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7911562/

10-12 12:52
查看更多