Question

我有一个由图像和菜单组成的菜单：悬停我想添加一个背景图片而不是简单地进行图像替换（所有这些都在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 of what happens http://i37.tinypic.com/2isee69.png

Answer 1

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

用于图像超链接的CSS图像叠加

1 个答案: