Html CSS div问题（边框和图像）

情况有点长，所以我不想麻烦了。重点是，我正在尝试将图像链接放置到背景图像顶部特定位置的不同页面。我有背景图像，我有在div中出现的链接图像。问题是现在图像不会改变，无论我如何改变它们的参数。 这是HTML

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

---

您指的是

.anchor1

这是一个类，但是您希望使用

#anchor1

这将指的是一个ID。我建议将一个类添加到所有

标记中，您将位置、

大纲和
z-index
应用到这些标记中，并使用
#anchor1
，
#anchor2
等
左
和
顶
属性。
你想让这些链接彼此相邻显示吗？在你的CSS中，你引用了一个类
.anchor1
，这个类在你的
标签上都不存在-这是故意的吗？也许他的意思是

。在HTML

id='anchor1'

中有，但在CSS中有

是类，

#

是id。将CSS更改为

#anchor1

。

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