部分的にバックグラウンドイメージの後ろにボタンを作成する

Question

部分的にバックグラウンドイメージの背後にあるボタンを作成する必要があります。意味は、基本的にボタンの左端のみがカバーされています。私が実行している問題は、バックグラウンドイメージであるため、ボタンを背後に置くことができる唯一の方法は、バックグラウンドイメージを持つレイヤーよりもボタンのZ-インデックスを低く設定することです。ボタンをクリックしないようにします。

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>