我想让背景图片及其中的内容都可点击。我不确定如何实现它......
图片:
我希望图像和内容都可以点击。
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;
}
我该如何改变它?需要一些指导...
答案 0 :(得分:3)
如果您使用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;
}
答案 1 :(得分:0)
背景无法点击。虽然您可以通过将背景图像分配给链接来模拟这种行为。
只需删除/省略DIV
并将此类设置为锚点即可。也可以将display: block;
分配给链接以允许指定宽度和高度。