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

Question

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

    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>

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

How do I overlay an input image with a color when clickin on it?

html

css

focus

image

input