Tạo kiểu "redacted"/"black-out" trong CSS?

Question

Tôi muốn tạo ra một phong cách CSS mà sẽ cho phép tác giả của tôi viết đánh dấu như thế này:

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>. 

Tôi hiện đang có một phong cách như thế này mà không được công việc một cách công nghệ thấp rất đơn giản:

span.redacted { 
    color: black; 
    background-color: black; 
} 

Một yêu cầu là tôi muốn người xem có thể đánh dấu văn bản và xem nội dung thực "đằng sau". Vì vậy, chỉ cần sử dụng một hình ảnh sẽ không hoạt động.

Thay vì sơ đồ hiện tại của tôi chỉ thay đổi văn bản & màu nền, tôi muốn "bôi đen" trông giống như nó đã thực sự được áp dụng bởi bút cảm ứng. Với các cạnh rách rưới và đồ vật.

Bất kỳ đề xuất nào về cách thực hiện việc này? Tôi thực sự muốn giữ cho XHMTL của tôi càng tinh khiết càng tốt và đặt càng nhiều điều này vào CSS càng tốt.

[CHỈNH SỬA: Ví dụ về văn bản đã chỉnh sửa]

Bài viết trên Wikipedia này cung cấp một số ví dụ về văn bản được chỉnh sửa thực. Ví dụ đầu tiên là thực sự thô (quá thô tôi nghĩ). Thứ hai cho thấy một số lượng quá nhiều của redaction, nhưng bạn có thể thấy rằng các 'đánh dấu' là không thẳng/sạch.

http://en.wikipedia.org/wiki/Sanitization_(classified_information)

tôi thấy ví dụ này cũng như:

http://2.bp.blogspot.com/_mJPzxRaCL64/S4X6Zn0MPKI/AAAAAAAAJdw/vX4MYNdUyIk/s400/ishot-2064.jpg

Answer 1

Tôi không chắc liệu đây có phải là hiệu ứng bạn đang làm hay không, nhưng tôi chỉ trộn lẫn một loạt các phong cách tinh tế để làm cho nó trông giống như một điểm đánh dấu đã gạch chéo các từ, hơi "không hoàn hảo":

Demo (đối với Firefox): http://jsfiddle.net/vzC96/2/

Bạn sẽ phải dịch này vào một cái gì đó qua trình duyệt:

.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; 
} 

nó nghiêng văn bản riêng của mình là tốt, nhưng nó thường ẩn để có thể không quan trọng với bạn.

white-space:nowrap; là những gì sẽ giữ cho nhịp không bị vỡ (chuyển sang dòng mới).

Nếu bạn muốn đi tuyến đường hình ảnh, và sử dụng một hình ảnh duy nhất, bạn có thể tận dụng lợi thế của CSS3 background-size và kéo dài nó trên toàn bộ khoảng.

Answer 2

Thiết lập một hình nền (Tileable) trên các yếu tố sử dụng background-image: url('location-of-the-image.png'); trông giống như một cây bút dạ-tip.

Answer 3

Nếu bạn chỉ làm điều đó cho vui trong diễn đàn hoặc một số văn bản trong trang của bạn, bạn chỉ có thể sử dụng Unicode Character 'FULL BLOCK' (U + 2588) █ ... và sau đó chỉ cần sao chép và dán nó vào câu ████████ trông giống như vật liệu được làm lại.

Nếu điều đó giúp ích cho bạn.