从本质上讲，我想做一些类似于Recaptcha 2的功能，当它让你点击符合特定标准的图像时。你可以see a Recaptcha demo here但它有时可以让你解决文字问题，而不是图像选择。所以这是一个截图：
当您单击其中一个图像(在这种情况下，包含牛排图片)时，您单击的图像会缩小并显示蓝色勾号，表示您已勾选它。
假设我想重现这个确切的例子。
我意识到我可以有9个隐藏的复选框，并附加一些jQuery，这样当我点击图像时，它会选择/取消选中隐藏的复选框。但是如何缩小图像/覆盖蜱？
解决方法
这很容易实现，无需预先制定的解决方案。它也会教你很多，因为你似乎不太容易使用CSS。
这是你需要做的：
您的复选框需要具有不同的ID属性。这允许您连接< label>使用标签的for-attribute来实现它。
例：
<input type="checkBox" id="myCheckBox1" /> <label for="myCheckBox1"><img src="http://someurl" /></label>
将标签附加到复选框将触发浏览器行为：每当有人单击标签(或其中的图像)时，将切换复选框。
接下来，通过应用示例display：none来隐藏复选框;它。
现在剩下要做的就是为你的标签设置你想要的样式：在伪元素之前(复选框替换元素)：
label:before {
background-image: url(../path/to/unchecked.png);
}
在最后一个棘手的步骤中，您使用CSS’：选中选择器来在选中复选框时更改图像：
:checked + label:before {
background-image: url(../path/to/checked.png);
}
(相邻的兄弟选择器)确保您只更改标记中直接跟随隐藏复选框的标签。
您可以通过将两个图像放在一个spritemap中并仅在背景位置应用更改而不是交换图像来优化它。
当然你需要正确定位标签并应用display：block;并设置正确的宽度和高度。
编辑：
我在这些说明之后创建的codepen示例和代码段使用相同的技术，但不是使用图像作为复选框，复选框替换完全使用CSS完成，创建一个：在标签之前，一旦选中，就有内容：“✓”;添加一些圆形边框和甜蜜过渡，结果非常可爱！
这是一个工作的codepen，展示了该技术，并不需要复选框的图像：
07000
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkBox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
}
label:before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked + label {
border-color: #ddd;
}
:checked + label:before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked + label img {
transform: scale(0.9);
Box-shadow: 0 0 5px #333;
z-index: -1;
}
<ul> <li><input type="checkBox" id="cb1" /> <label for="cb1"><img src="http://lorempixel.com/100/100" /></label> </li> <li><input type="checkBox" id="cb2" /> <label for="cb2"><img src="http://lorempixel.com/101/101" /></label> </li> <li><input type="checkBox" id="cb3" /> <label for="cb3"><img src="http://lorempixel.com/102/102" /></label> </li> <li><input type="checkBox" id="cb4" /> <label for="cb4"><img src="http://lorempixel.com/103/103" /></label> </li> </ul>
