スタックされたZ-インデックス画像のページ分割

Question

私はそれがモンスターによって保持されているように見えるページネーションを作成しようとしています。 You can see it at the bottom of this page

2つの画像を作成しました。 Z-indexが-10のモンスターの完全なイメージの1つ。そして、2つ目の画像は、ページインデックスのついた爪が10のZインデックスで表示されます。

問題は、爪の画像がページ区切りコードの上に置かれているためです。道）。

私が試みていることが可能であるかどうかはわかりません。私は基本的に、怪物がそれを保持しているように見えるページネーションをしたい。これでもなんとかある場合

.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

• まず、あなたのアイデアが大好きです。
• 第2に、あなたの質問には、私はあなたがpagination_monster_clawsでdivにpointer-events: none;を加えるべきだと思います。この属性は、あなたがそこにいるようなイメージをクリックすることを許可します