是否可以在按钮上放置图像（.png）并仍然可以单击按钮

Question

是否可以在按钮上设置图像（.png）并且仍然可以单击该按钮

Answer 1

使用mvn dependency:tree ，你的确可以：

z-index

编辑 - 您显然需要确保图片button.btn-class { z-index: 999; } 低于999，如上所述！

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

Answer 2

是使用更高的z-index值作为按钮而不是图像。有关详细信息，请参阅 link

img{z-index:9;}

button{z-index:99;}

Answer 3

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

使用它：

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

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

Answer 4

如评论中所述......未调整图像的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>