我想创建一个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
解决方法
我不知道这是否是你以后的效果,但我只是混合了一堆微妙的风格,使它看起来像一个标记已经划出了字,略微“不完美”的样子：
演示(适用于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;
}
它也会扭曲文本本身,但它通常是隐藏的,这可能不重要你.
白色空间：nowrap;是什么会阻止跨越(打破新的一线).
如果你想去图像路由,并使用单个图像,你可以利用CSS3的背景大小,并在整个范围内展开它.
