gpt4 book ai didi

image - 用于图像超链接的 CSS 图像叠加层

转载 作者:行者123 更新时间:2023-11-28 14:56:59 25 4
gpt4 key购买 nike

我有一个由图像组成的菜单,在悬停时我想添加背景图像,而不是简单地进行图像替换(全部使用 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

最佳答案

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

关于image - 用于图像超链接的 CSS 图像叠加层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3454530/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com