使背景圖像可點擊以及內容可點擊

我想使背景圖像以及其中的內容可點擊。我不知道如何實現它？使背景圖像可點擊以及內容可點擊

的圖像：

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

我要如何改變呢？需要一些指導...

來源

2012-07-10 lakesh

如果您使用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; 
}

來源

2012-07-10 07:54:05

但圖像轉移到下面....如何糾正？ – 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;也可以分配給鏈接以允許指定寬度和高度。

來源

2012-07-10 07:56:49 feeela

使背景圖像可點擊以及內容可點擊

回答

相關問題