Html 创建按钮部分位于背景图像后面

我需要创建一个按钮，部分背后的背景图像。也就是说，基本上只覆盖了按钮的左边缘。我遇到的问题是，因为它是一个背景图像，所以我能够得到它后面的按钮的唯一方法是将按钮的z索引设置为低于背景图像的图层，这反过来会使按钮不可点击

可以将按钮隐藏在相邻元素后面。不能仅将其隐藏在“背景图像”后面，因为图像应用于元素本身，所以必须将其隐藏在元素后面。按钮的可见部分仍然可以单击

正文{
位置：相对位置；
}
div{
背景：url（'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg'）左上角不重复；
背景尺寸：封面；
显示：内联块；
位置：相对位置；
宽度：100px；高度：100px；
}
钮扣{
位置：绝对位置；
右：0；
左：80px；
}

按钮

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。看到了吗？如果图像是一个形状，而不是一个完美的正方形，那么就没有办法做到这一点，因为元素并不真正关心图像的形状？@VonKieffer这是一个代码示例。但是忘记图像吧——如果按钮完全在元素后面，不，你不能点击它。但是，如果可以使按钮的一部分不在元素后面，则可以单击不在元素后面的部分。