如何以符合標準的方式鏈接標題？

Question

我有HTML塊，看起來像這樣：

<div id="header"> 
    <h1>title</h1> 
    <h2>subtitle</h2> 
</div> 

我使用一個CSS技術來隱藏所有文字和用圖像替換它。但我想將整個區塊鏈接到主頁。我不能將它包裝在<a>中，因爲這不符合標準。那我該怎麼做呢？

---

我的解決方案;通過New in town

<div id="header"> 
    <h1>title</h1> 
    <h2>subtitle</h2> 
    <a href="index.html">Home</a> 
</div> 

#header { 
    text-indent: -9999px; 
    width: 384px; 
    height: 76px; 
    background: transparent url(../images/header.png) no-repeat; 
    margin: 10px; 
    position: relative; 
} 

#header a { 
    display: block; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Answer 1

將鏈接元素放在標題div之外，並使用絕對定位覆蓋它們。還要添加一個z-index以確保鏈接接收用戶輸入。

<style> 
    a.header 
    { 
     position: absolute; 
     display: block; 
     width: 100%; 
     height: 100px; 
     z-index: 1; 
    } 
</style> 

<div id="header"> 
     <h1>title</h1> 
     <h2>subtitle</h2> 
</div> 

<a href="homepage" class="header"></a> 

Answer 2

覆蓋鏈接到網頁上的所有頂部完全透明的圖像啓發？