Question

我有一个透明的PNG，它与按钮部分重叠。图像重叠时，按钮变为非活动状态。有没有办法将透明度“关闭”，以便按钮可以在其后面点击？还是有其他技巧可以解决这个问题吗？

Answer 1

img透明度与您是否可以点击按钮无关，因此“关闭透明度”不会为您做任何事情。

正如Mar_Garina指出的那样，z-index决定了哪个元素位于其他元素之上/之下。如果您希望该按钮始终位于顶部，请为其指定更高的z-index。但请注意，此图像将与该按钮重叠，这可能不是您想要的。

如果您正在寻找一些自定义按钮样式，请查看button sliding doors with css

Answer 2

我想说的是，总的来说，这个问题确实无法解决。无论图像区域的像素是否透明，图像区域始终是矩形的。

然而，@ Chief17的回答给了我一个想法，如果你的按钮没有使用操作系统的渲染风格，并且本身没有背景图像，那么这个想法可能会有效。

如果是这种情况，并且一般布局情况允许，您可以设置应该与按钮重叠的图像作为该按钮的背景图像 - 另外到页面上浮动的图像。使用background-position，您必须调整图像的位置，使其几乎离开按钮的可见区域，仅覆盖按钮不应覆盖的小重叠区域。

这可以理解吗？它使用按钮的background-image属性来伪造重叠，而事实上，重叠区域是按钮的背景图像。

仅当您对按钮的位置和其他因素有严格控制时，此功能才有效。它可能不适合你。

Answer 3

给按钮提供更高的z-index？

Answer 4

为按钮指定更高的z-index，使其高于透明图像

document.getElementById('buttonId').style.zIndex = -5

Answer 5

虽然我不推荐它，但您可以使用以下样式创建锚点：

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

a.className {
  display: block;
  width: [width of button];
  height: [height of button];
  z-index: [above image];
}

模仿按钮动作......

Answer 6

你不能这样做：

<style type="text/css">
#button
{
background-image: url("[image location]");
width: [image width];
width: [image height];
}
</style>

和

<input type="button" value="button" id="button"/>

这使按钮可以点击并使图像位于顶部。

禁用图像按钮

6 个答案: