单击输入图像时如何用颜色覆盖输入图像？

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>