Question

我正在尝试在HTML文档中制作CSS表格以更改背景链接的图片。

您可以使CSS成为可能，因此，如果您将鼠标移到某个东西上，它可能会喜欢更改其颜色

<!DOCTYPE html>
<html>
<head>
<style>
#a1:link, #a1:visited {
  background-color:red;
  padding: 15px 25px;
  text-decoration: none;
}

#a1:hover, #a1:active {
  background-color:green;
}
</style>
</head>
<body>
	<a id="a1" href="home.html">			
	</a>
</body>
</html>

有没有一种方法可以代替彩色图像？我试过了背景图片：url（'locationtoimage.jpg'）只会使链接消失。我都改变了背景颜色转换为背景图像，我做了正确的格式和设置，但无法正常工作？我曾尝试使用谷歌搜索，但每个人都只是要求类似的按钮，但我正在处理链接。

对不起，如果已经在其他地方回答了这个问题。我尝试寻找，但找不到任何东西。我真的相信这是可能的并且很简单，我可能只是在寻找一些东西。这就是我所拥有的。

<!DOCTYPE html>
<html>
<head>
<style>
#a1:link, #a1:visited {
  background-image:url('media.jpg');
  padding: 15px 25px;
  text-decoration: none;
}

#a1:hover, #a1:active {
  background-image:url('home.jpg');
}
</style>
</head>
<body>
	<a id="a1" href="home.html">			
	</a>
</body>
</html>

这虽然有效

    <!DOCTYPE html>
    <html>
    <head>
    <style>
   #a1 {
width: 200px;
height: 200px;
}
    #a1:link, #a1:visited {
      background-image:url('imageatasite');
      padding: 15px 25px;
      text-decoration: none;
    }

    #a1:hover, #a1:active {
      background-image:url('imageatasite');
    }
    </style>
    </head>
    <body>
        <a id="a1" href="home.html">            
        </a>
    </body>
    </html>

但我没有使用html文件夹中的图像在线使用即时消息但这行不通吗？

Answer 1

尝试谷歌搜索图像并将其粘贴在背景图像url中，以查看它是否是defientley而非文件。

我建议使用单独的div包装器包装图像失败。在：hover上，使用display none可以隐藏您不想在悬停时看到的图像。

然后，您可以将图像设置为div的100％。还要确保检查文件扩展名。

Answer 2

我不完全了解问题所在，但其他图像也可以工作。我想使用的图像是同一文件夹中的相同文件扩展名，但是我对其进行了快照，现在它们可以正常工作。谢谢您的帮助，我认为现在一切都很好。

如何在CSS中更改链接背景图片

2 个答案: