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 clas 我想创建一个CSS样式,让我的作者写这样的标记：

On <span >September,10 2011</span> the special operations agent,<span >John Smith</span>,on orders from his commanding officer,<span >Captain Kirk</span>,terminated the well kNown terrorist <span >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的背景大小,并在整个范围内展开它.

总结

以上是内存溢出为你收集整理的html – 在CSS中创建“编辑”/“黑色”风格？全部内容，希望文章能够帮你解决html – 在CSS中创建“编辑”/“黑色”风格？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。