CSS div麻烦（边界和图像）

Question

情况有些漫长，所以我不会打扰。 重点是，我试图将指向不同页面的图像链接放在背景图像上方的特定位置。 我有背景图片，并且链接图片显示在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>

请注意，直到我找到正确的位置，我才能获得指向任何地方的链接。

还有它的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;
        }

Answer 1

您所指的是.anchor1 ，这是一个类，但是您想使用#anchor1 ，这将引用一个ID。 我建议向所有<a>标记添加一个类，向其应用位置， outline和z-index ，并为left和top属性使用#anchor1 ， #anchor2等。