使背景图像可点击以及内容可点击

问题描述：

我想使背景图像以及其中的内容可点击。我不知道如何实现它？使背景图像可点击以及内容可点击

的图像：

enter image description here

我想这两个形象，以及将要被点击。

的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现在是有效包裹整个切片用锚标记所以这将是

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

但图像转移到下面....如何纠正？ – lakesh 2012-07-10 07:58:05

你需要啾啾你的css，如果你可以添加你的代码到这个http://jsfiddle.net/我会很乐意让它工作 – 2012-07-10 07:59:45

我不能添加它因为它的文本来自python ....那就是为什么... – lakesh 2012-07-10 08:00:40

答

后台不能点击。尽管您可以通过将背景图像分配给链接来模拟此类行为。

只需删除/省略DIV并将此类设置为锚。 display: block;也可以分配给链接以允许指定宽度和高度。

使背景图像可点击以及内容可点击

相关推荐