图像超链接的 CSS 图像覆盖答案

【问题标题】：CSS image overlay for image hyperlinks图像超链接的 CSS 图像覆盖
【发布时间】：2019-08-06 03:07:12
【问题描述】：

我有一个由图像组成的菜单，在悬停时我想添加背景图像，而不是简单地替换图像（全部在 CSS 中，没有 JavaScript）。

但是，如果我只是更改背景图像，虽然透明度和水平对齐都很好，但它只是在错误的垂直位置。无论我尝试什么，背景图像都会移到图像的最底部，并且您会在主菜单图像下方看到背景图像的文本高度。

关于如何解决这个问题的任何想法？

最简单的形式可以重复如下：

<html>
<head>
<style>a:hover{background:url('over.png');}</style>
 </head>
<body>
    <a href="#"><img src="item.png" style="border:0; " /></a>
</body>
</html>

item.png 在 over.png 的底部显示其图像顶部的大约 10 像素谢谢。

添加背景位置：x y;仍然只在图像底部显示 over.png 并将其裁剪到一个字符的高度。

下面显示了两张图片以及右边的内容

【问题讨论】：

如果你明确地将超链接的大小设置为内部图像的大小，同样的事情还会发生吗？
图像大小相同，但我还是尝试了。我插入了一张图片

标签： image css hyperlink replace

【解决方案1】：

如果你给我们截图和一些代码，调试起来会更容易。但听起来您可能只需要使用 background-position 将背景图像定位在元素内。您可以使用像素、百分比或仅使用顶部、底部、左侧、右侧来将背景图像放置在元素内您想要的任何位置。 http://www.w3schools.com/css/pr_background-position.asp。您可能还想查看图像精灵以获得翻转效果。您可以将原始图像和翻转图像放在一个文件中，然后简单地更改悬停时的背景位置。

【讨论】：

据我所见，背景位置仅适用于水平方向，仅具有左，右，中选项，以及从左侧偏移的像素？垂直对齐是错误的。
对不起，我会改写。我试过了，它似乎不起作用。它仍然将背景图像锁定在主图像的底部。更改背景位置只是调整底部显示的偏移量。如果这有意义？