Question

我正在尝试创建一个看起来像是被怪物抓住的分页。 You can see it at the bottom of this page

我所做的是制作两张图片。 z-index为-10的怪物的完整图像之一。还有第二张图片就是爪子在分页上的分数为z的10分。

问题是，由于爪图像位于分页代码的顶部，因此阻止它被使用（因为它基本上是在路上）。

我甚至不知道我尝试的是否可能。我基本上只是希望一个看起来像怪物的分页正在举起它。

这是我的代码：

.pagination_monster {
  position: relative;
  bottom: 138px;
  background-image: url(../images/pagination_monster.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 141px;
  margin: 0 auto;
  z-index: -10;
}
.pagination_monster_claws {
  position: relative;
  top: 55px;
  background-image: url(../images/pagination_monster_claws.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 42px;
  margin: 0 auto;
  z-index: 10 !important;
}

<div class="row text-center ">
  <div class="col-lg-12">
    <div class="pagination_monster_claws"></div>
    <ul class="pagination">
      <li>
        <a href="#">&laquo;</a>
      </li>
      <li class="active">
        <a href="#">1</a>
      </li>
      <li>
        <a href="#">2</a>
      </li>
      <li>
        <a href="#">3</a>
      </li>
      <li>
        <a href="#">4</a>
      </li>
      <li>
        <a href="#">5</a>
      </li>
      <li>
        <a href="#">&raquo;</a>
      </li>
    </ul>
    <div class="pagination_monster"></div>
  </div>
</div>

同样，我不确定这是否可行。任何可以指出正确方向的见解都会非常有帮助。

谢谢！

Answer 1

首先，我喜欢你的想法，非常酷。
其次，对于您的问题，我认为您应该使用课程pointer-events: none;将pagination_monster_claws添加到您的div中。该属性允许您点击图像，就像它不在那里

叠加z-index图像的分页

1 个答案: