Question

我需要创建一个部分位于背景图像后面的按钮。意思是，基本上只是按钮的左边缘被覆盖。我遇到的问题是，因为它是一个背景图像，我能够获得它背后的按钮的唯一方法是将按钮的z-index设置为低于具有背景图像的图层，反过来，使按钮不可点击。

Answer 1

您可以隐藏相邻元素后面的按钮。您无法将其隐藏在“背景图像”后面，因为图像已应用于元素本身，因此您必须将其隐藏在元素后面。按钮的可见部分仍然可以点击。

body {
  position: relative;
}

div {
  background: url('http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg') top left no-repeat;
  background-size: cover;
  display: inline-block;
  position: relative;
  width: 100px; height: 100px;
}

button {
  position: absolute;
  right: 0;
  left: 80px;
}

<button>button</button>
<div></div>

在背景图像后部分创建按钮

1 个答案: