표준 호환 방식으로 헤더를 연결하는 방법?

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 외부에 link 요소를 추가하고 덮어 씁니다. 또한 링크가 사용자 입력을 수신 할 수 있도록 Z- 색인을 추가하십시오.

<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

오버레이 홈페이지에 링크되어 모두의 상단에 완전히 투명 이미지에서 영감을?