是否可以在按钮上放置图像（.png）并且仍然可以单击按钮[关闭]答案

【问题标题】：is it possible to have a image (.png) over a button and still be able to click the button [closed]是否可以在按钮上放置图像（.png）并且仍然可以单击按钮[关闭]
【发布时间】：2016-02-23 09:08:59
【问题描述】：

是否可以在按钮上放置图像 (.png) 并且仍然可以单击该按钮

【问题讨论】：

这里有一些答案。 1-Answer 2-Answer ;-)
你应该为图片设置pointer-events: none;。请注意support
当您使用 png 图像时，您可以将其用作背景，并且您可以轻松地根据屏幕截图中显示的要求定位按钮，或者您也可以使用按钮的绝对位置.. 像这样jsfiddle.net/3qxjbrL9/3

标签： jquery html css

【解决方案1】：

使用z-index，确实可以：

button.btn-class {
    z-index: 999;
}

编辑 - 您显然需要确保图像 z-index 低于上面的 999！

好的参考：https://css-tricks.com/almanac/properties/z/z-index/

【讨论】：

但是按钮会在图像上方
图片应该在顶部，而不是按钮。
@A.Wolff 抱歉，我看错了问题 - 我将删除我的答案！
@RaduDragan 同上，我看错了问题，我会删除我的答案。

【解决方案2】：

如 cmets 中所述...不调整图像的 z-index（这显然不是一个选项），您只能禁用图像上的指针事件。

img {
  pointer-events:none;
}

Support 是所有现代浏览器，但只有 IE11

糟糕的演示：

body {
  margin: 0;
  padding: 0;
}
div {
  height: 400px;
  display: flex;
  flex-direction: column;
}
button {
  align-self: flex-start;
}
img {
  opacity: 0.5;
  position: relative;
  top: -1em;
  margin-left: 2em;
  border: 1px solid red;
  pointer-events: none;
}

<div>
  <button>Click Me</button>
  <img src="http://lorempixel.com/g/400/200/" alt="" />
</div>

【讨论】：

谢谢它就像一个魅力

【解决方案3】：

是的，按钮使用比图像更高的 z-index 值。有关更多信息，请参阅此 link

img{z-index:9;}

button{z-index:99;}

【讨论】：

但这并没有将图像设置在按钮上。编辑：看截图，如果元素总是以这种方式显示，这确实是一个解决方案
图片应该在顶部，而不是按钮。
将您的代码发布为演示，以便我们提供更好的帮助
fotodex.ro/constructor/test
不，不是fotodex.ro/constructor/test

【解决方案4】：

css 的 z-index 属性仅适用于定位元素（位置：绝对、位置：相对或位置：固定）

使用这个：

.imgclass {
    position: relative; //or whatever you want i.e fixed
    z-index: -1;
}

.buttonclass {
    position: relative;
    z-index: 999;
}

【讨论】：

图片应该在顶部，而不是按钮。
好的，作为您的查询，您不能这样做......
您将无法单击/悬停按钮，因为 html 元素就像堆栈......
你可以在这里看到 z-index 这不是答案fotodex.ro/constructor/test
fotodex.ro/constructor/test/此网页不可用