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