情况有点长,所以我不会打扰。重点是,我正在尝试将指向不同页面的图像链接放置在背景图像之上的特定位置。我有背景图像,并且链接图像出现在 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;
}
最佳答案
您指的是 .anchor1
这是一个类,但是你想使用 #anchor1
这将引用一个ID。我建议为所有 <a>
添加一个类您应用位置的标签,outline
和 z-index
并使用 #anchor1
, #anchor2
等 left
和 top
属性。
关于html - CSS div 问题(边框和图像),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21722789/