2014-02-12 80 views
0

情況有點長,所以我不打擾。點是,我試圖將圖像鏈接放置在背景圖像頂部特定位置的不同頁面上。我有背景圖片,我有鏈接的圖像出現在div中。現在的問題是,無論我如何更改參數,圖像都不會改變。 這裏的HTMLCSS div煩惱(邊框和圖像)

<div class='links' id ='canvas'> 
      <a id='anchor1' href ='index.html'><img class='one' src ="images/links/Alert-detail.png" ></a> 
      <a id='anchor2' href ='index.html'><img class='two' src ="images/links/Command-detail.png" ></a> 
      <a id='anchor3' href ='index.html'><img class='three' src ="images/links/floppy-detail.png" ></a> 
      <a id='anchor4' href ='index.html'><img class='four' src ="images/links/smiling-computer-sea-green.png" ></a> 
      <a id='anchor5' href ='index.html'><img class='five' src ="images/links/trash-detail.png" ></a> 
      <a id='anchor6' href ='index.html'><img class='six' src ="images/links/unhappy-computer-blue.png" ></a> 
      <a id='anchor7' href ='index.html'><img class='seven' src ="images/links/watch-detail.png" ></a>   
     </div> 

注意我並沒有鏈接導致的任何地方,直到我得到的位置正確。

而CSS它

  #canvas{ 
    position:relative; 
    height: 410px; 
    width: 881px; 
    outline: 2px solid red; 
    background-image:url('../images/link layout.png'); 

    } 
    .anchor1{ 
    position:absolute; 
    top: 200px; 
    left: 100px; 
    outline: 2px solid green; 
    z-index: 15; 
     } 
+0

你想讓這些鏈接顯示在一起嗎? – Victor

+0

在你的CSS中,你引用了一個'.anchor1'類,它並不存在於你的任何'' - 標籤 - 這是故意的? –

回答

1

你是指.anchor1這是一類,但是你想使用#anchor1這將指向一個ID。我建議在所有<a>標籤中添加一個類別,這些標籤應用於lefttop屬性,並將outlinez-index應用於#anchor1,#anchor2等。