html - 使背景图像和内容都可点击

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;
 }

我该如何改变它？需要一些指导...

Answer 1

如果您使用 HTML5，则现在可以使用锚标记包装整个部分，因此它将是

<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;也可以分配给链接以允许指定宽度和高度。