我不知道这是否是你以后的效果,但我只是混合了一堆微妙的风格,使它看起来像一个标记已经划出了字,略微“不完美”的样子:
你必须将它翻译成跨浏览器:
.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的背景大小,并在整个范围内展开它.