このページは、Andy Clarke(www.stuffandnonsense.co.uk) 氏によって書かれたMalarkey Image Replacement (MIR) tests の和訳です。このページの文書・画像・マルチメディアの著作権はすべて、元サイトにあります。翻訳は、Web翻訳等を利用しており誤訳が多数見受けられますので、正確な和訳がございましたらご連絡ください。
このページは、元サイトと同じ描画を行うために、言語タイプ以外は同じコーディングとスタイルシートを使用しています。
このページで解説されている詳細なチュートリアルと私が作成したサンプルページへのリンクがあります。
（私の場合）少し面白いヘッダスタイルで実験したかったので、私は <h1> タグで実験しました。
そして、若干スタイルを追加しました
<h1 class="h1">And All That Malarkey</h1>
h1 {font-size:500%; letter-spacing:-.1em; text-transform:lowercase; color:#333;}
そしてできたのが下の表示です
それから、誤って私が、多くの負の値を letter-spacing に em 単位で加えました･･･下にあるヘッダは見えますか？見えないですね？
それは、表示領域から効果的に消えたからです。
私は、現在このblack hole
効果について考えたいです、letter-spacing がとてもえらい所で、要素が効果的にそれ自体の上で崩れる。
<h1 class="mir">And All That Malarkey</h1>
.mir { letter-spacing : -1000em; }
あなたに私がズルをしていると思われた場合に備えて、私は周りに灰色の境界を置きました。
(border:1px solid #ccc;).
どうですか？ それは宇宙の遠い領域に消えました。おおお！、我々が今日テキストを背景イメージと取り替えるならば、何が起こりますか？
さて、私がバガーだ！これはいい仕事だ！
いいえを除き、Opera は正しく描画していません、では be nice to Opera hack
をやって Mac IE からは非表示にします。MacIE を修正するために考えてくれたRobert Jan Verkade に感謝します。
.mir { letter-spacing : -1000em; }
/* Just for Opera, but hide from MacIE */
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* End of hack */
このページで作られた方法で利用可能な詳細なチュートリアルがあります。
ところで、これらのイメージは盗用ではありません。