純粋なCSS/HTMLでダミーのHTMLレイアウトを作成し、それをテキストとして表示する

HTMLレイアウトを作成してテキストとして表示する方法を見つけようとしています。
たとえば、選択に応じて、ダミーhtmlレイアウト上の領域を「ペイント」したいと思います。
私は画像を使って例を作りましたが、私の質問は画像の部分を純粋なHTML/CSSに置き換える方法ですか？純粋なCSS/HTMLでダミーのHTMLレイアウトを作成し、それをテキストとして表示する

ちょうどサイドノート、私は.NET環境で働いている（MVC）

jsFiddle example

はCSS：

は

img{ 
    display: none; 
} 
img:target { 
    display: block; 
    }

HTML：

<div> 
    <a href="#topHead">Top Head</a> | 
    <a href="#bottomHead">Bottom Head</a> | 
    <a href="#topBody">Top Bottom</a> | 
    <a href="#bottomBody">Bottom Head</a> 
    <div> 
    <img id="topHead" src="https://s29.postimg.org/fjuguwv2f/htmlTopHead.png" alt=""> 
    <img id="bottomHead" src="https://s29.postimg.org/qtn6pv03r/htmlBottomHead.png" alt=""> 
    <img id="topBody" src="https://s29.postimg.org/vgt8rmngn/htmlTopBody.png" alt=""> 
    <img id="bottomBody" src="https://s29.postimg.org/q2ugk2xqf/htmlBottomBody.png" alt=""> 
    </div> 

</div>

出典

2017-01-03 Sagiv b.g