html – 在CSS中创建“编辑”/“黑色”风格？

我想创建一个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的背景大小,并在整个范围内展开它.

原文地址：https://www.jb51.cc/html/230243.html