クリックして入力画像をどのように重ねるのですか？

Question

<input type="image>をユーザーがクリックしたときに色に変える方法が見つかりません。つまり、画像が占めるスペースが普通の色に置き換えられます。私のコードは次のとおりです：

input:focus{ 
    color:#0C6 
} 

と

<input type="image" src="image.jpg" /> 

Answer 1

あなたは、所望の色を有する親ラッパーが必要
と入力:focusにopacity

.imageWrapper{ 
 
    display: inline-block; 
 
    background: #0C6; 
 
} 
 

 
.imageWrapper input[type=image]{ 
 
    vertical-align: top; 
 
    transition: 0.3s; /* fade nicely :) */ 
 
} 
 

 
.imageWrapper input[type=image]:focus{ 
 
    opacity: 0; 
 
}

<span class="imageWrapper"> 
 
    <input type="image" src="//placehold.it/60x60/f00"> 
 
</span>

を使用して、それを透明にしますよ