배경 이미지를 클릭 할 수있게하고 내용을 클릭 할 수있게 만들기

Question

나는 그 내용을 클릭 할 수있을뿐만 아니라 배경 이미지도 만들고 싶습니다.

내가 클릭으로 두 이미지뿐만 아니라 내용을 원하는 : 나는 이미지가

... 그것을 구현하는 방법을 잘 모르겠습니다.

은 HTML 부분 :

<div class = "reportslistitem"> 
    <a href="[[ url ]]" 
     target=="_blank"> 
      [[ startdate ]] - 
      [[ enddate ]] 
    </a> 
</div> 

하는 CSS 부분 :

.reportslistitem{ 
    width:120px; 
    height:140px; 
    display:block; 
    float: right; 
    background:url('../images/Report-icon-without-text.png'); 
} 


a{ 
font: bold 12px 'Thin2Regular'; 
text-decoration: none; 
color: rgb(0,0,0); 
padding: 10px 15px; 
position: relative; 
text-align: center; 
display:block; 
padding: 0px; 
position:relative; 
top:25px; 
} 

내가 그것을 어떻게 변경합니까? 당신이 HTML5를 사용하는 경우 될 수 있도록 앵커 태그로 전체 섹션을 포장하는 지금 유효

Answer 1

... 몇 가지 지침이 필요

<a href="[[ url ]]" target="_blank"> 
    <div class = "reportslistitem"> 
      [[ startdate ]] - [[ enddate ]] 
    </div> 
</a> 

CSS해야 뭔가

.reportslistitem{ 
    width:120px; 
    height:140px; 
    display:block; 
    background:url('../images/Report-icon-without-text.png'); 
} 


a{ 
font: bold 12px 'Thin2Regular'; 
text-decoration: none; 
color: rgb(0,0,0); 
padding: 10px 15px; 
text-align: center; 
padding: 0px; 
display:block; 
width:120px; 
height:140px; 
}​ 

Answer 2

배경처럼 클릭 할 수 없습니다. 비록 당신이 배경 이미지를 링크에 할당함으로써 그러한 행동을 에뮬레이트 할 수는 있지만.

DIV을 제거/제외하고이 클래스를 앵커로 설정하면됩니다. display: block;은 너비와 높이의 지정을 허용하는 링크에 할당 될 수도 있습니다.