图像悬停功能 (css) 找不到图像

Question

我想要一个带有图像和链接的按钮。这是我的风格代码：

<style>
    twitter{
    display:block;
    background-image: url('CIMA/Social/Twitter.png');
    width: 30%;
    height: 30%;
}
</style>

和我的身体代码：

<twitter href="#"> &nbsp; </twitter>

但它没有显示任何图像。我尝试了很多不同的图像路径，但它不会显示。。。

Answer 1

哦。为什么不

<a href="#"><img src= "cima/social/twitter.png" /> </a>
<style>
a img {width:30%;height:30%;}
</style>

Answer 2

您的HTML无效，因为您使用的是自定义（无效）元素。尝试

HTML

<a class="twitter" href="#"> &nbsp; </a>

CSS

.twitter{
    display:block;
    background-image: url('CIMA/Social/Twitter.png');
    width: 30px; /* or whatever value */
    height: 30px;
}