我有一个与按钮部分重叠的透明 PNG。按钮在图像重叠处变为非活动状态。有没有办法将透明度“关闭”,以便在其后面可以点击按钮?或者有没有其他技巧可以解决这个问题?
6 回答
The img transparency has nothing to do with whether or not you can click the button, so 'turning the transparency off' is not going to do anything for you.
As Mar_Garina points out, z-index is what determines which element lies above/below other elements. If you want that button to always be on top, give it a higher z-index. Note however that this image will the be overlapped by that button which may not be what you want.
Also check out button sliding doors with css if you're looking for some custom button styling
我想说,总的来说,这个问题确实没有解决办法。一个图像区域总是矩形的,不管它的像素是否透明。
但是,@Chief17 的回答给了我一个想法,如果您的按钮未使用操作系统的渲染样式并且本身没有背景图像,则该想法可能会起作用。
如果是这种情况,并且一般布局情况允许,您可以将应该与按钮重叠的图像设置为该按钮的背景图像 -除了在页面上浮动的图像之外。使用background-position
,您将不得不调整图像的位置,使其几乎离开按钮的可见区域,仅覆盖按钮不应覆盖的小重叠区域。
这是可以理解的吗?它使用按钮的background-image
属性来伪造重叠,而实际上,重叠区域是按钮的背景图像。
这仅在您真正严格控制按钮的位置和其他因素时才有效。它可能不适合你。
你不能这样做吗:
<style type="text/css">
#button
{
background-image: url("[image location]");
width: [image width];
width: [image height];
}
</style>
和
<input type="button" value="button" id="button"/>
这使按钮可点击并使图像位于顶部。
虽然我不推荐它,但您可以创建具有以下样式的锚点:
<a href="#" class="className"> </a>
a.className {
display: block;
width: [width of button];
height: [height of button];
z-index: [above image];
}
模仿按钮动作....
也许给按钮更高的z-index?
为按钮提供更高的 z-index 以使其位于透明图像上方
document.getElementById('buttonId').style.zIndex = -5