在CSS中創建「redacted」/「black-out」風格？

我想創建一個CSS樣式，可以讓我的作者寫類似這樣的標記：在CSS中創建「redacted」/「black-out」風格？

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中。

[編輯：絕密文本的例子]

此Wikipedia文章提供實時刪節的文本的幾個例子。第一個例子非常粗糙（我認爲太粗糙）。第二個顯示了過多的編輯，但是您可以看到「標記」不是筆直/乾淨。

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

我發現這個例子中，同樣：

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

來源

2011-10-27 tig

如何使用' ~~...~~'而不是' ...'保持您的XHTML語義？ –

@SinanÜnür，一個很好的建議;語義上是有道理的。但對格式不起作用。 – tig

這就是爲什麼它在評論。 –

我不確定這是否是你以後的效果，但我只是混合了一堆微妙的風格，使它看起來像一個標記已經劃掉的話，稍微「不完美」看：

（適用於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; 
}

它確實扭曲文本本身爲好，但它通常是隱藏的，使可能對你無關緊要。

white-space:nowrap;是什麼將保持跨度不斷（走向一條新線）。

如果您想要使用圖像路徑並使用單個圖像，則可以利用CSS3的background-size並在整個範圍內對其進行拉伸。

來源

2011-10-27 06:04:06

+1：這是一個很棒的解決方法，這是一個非常新穎的概念，並且（在我看來）絕對符合要求。 – Nightfirecat

太棒了！這可能只是工作。我將不得不深入探討如何使其跨平臺工作。 – tig

其他人對如何使用圖像有任何想法（沒有拉伸單個圖像）？ – tig

設置使用background-image: url('location-of-the-image.png');，看起來像氈尖筆元件上的背景圖像（平鋪）。

來源

2011-10-27 03:59:41 Ryan

我不明白單個tilealbe（這不是一個單詞！）圖像可以表示可變長度的氈頂筆標記的所有4個邊。我想我至少需要3個圖像（左，中，中），中間可以重複，具體取決於跨度。另外，跨越字詞的問題呢？ – tig

@tig：將它們分開。至於四面，您應該在旁邊的元素上使用'：before'和'：after'，並且tileable圖像的頂部和底部可以有不齊的邊緣。合理的跨瀏覽器。 *你唯一能做的就是做一個黑客。* – Ryan

Tilealbe絕對不是一個單詞，不是。 – Hashim

如果您只是在論壇或您的網頁中的某些文字中使用它，您可以使用Unicode字符'FULL BLOCK'（U + 2588）█...然後將其複製並粘貼到句子████████看起來像編輯材料。

如果這對您有幫助。

來源

2012-01-25 05:39:06 RegCliff

下面是'full block'字符的實際HTML十進制實體代碼 - 可以直接放入網頁：█ – Pierz

在CSS中創建「redacted」/「black-out」風格？

回答

相關問題