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

【问题标题】：How do I overlay an input image with a color when clickin on it?单击时如何用颜色覆盖输入图像？
【发布时间】：2017-04-04 15:07:36
【问题描述】：

当用户单击它时，我找不到将<input type="image> 更改为颜色的方法，这意味着图像占用的空间将被纯色替换。我的代码如下：

    input:focus{
    color:#0C6
}

和

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

【问题讨论】：

标签： html css image input focus

【解决方案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>

【讨论】：