使用CSS生成HTML自定义复选框

经过一番密集的谷歌搜索后，我试图得到一张可点击的牙科图表，但徒劳无功。我想复制下图所示的牙科图表。一颗牙齿分为5个部分。我希望每个部分都可以点击。请有人帮助实现这与HTML和CSS。我不是前端专家

---

隐藏复选框，并在复选框标签内设置已实现范围的背景。您可以使用正确的图像url替换这些base64图像：

输入[类型=复选框]{
显示：无；
}
.checkboxImage{
显示：内联块；
宽度：40px；
高度：40px；
背景：url（'数据：image/png；base64，IVBORW0KggoaaaAnsuhueugaaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaCaaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAa
}
输入[类型=复选框]：选中+复选框图像{
背景图片：url（'数据：image/png；base64，ivborw0kggoaaansuheugaac4aaaaaucaiaaady27xgaaaaxnsr0iars4c6qaarnqu1baacxjwv8yquaaaajcehzcwaadsmaa7dacdvqgqqaabababosurbvfhhh7c6dqwyodfbxz2jzrwfpge6vb7brqqqwwwk8vksvksfcsrbqwqqwqwqwqwqwqwqwqwqwqwqwqwk8vk8vksvksvk8vqqqwqwqwqwqwqwqwqwqwqwqwqwqwqwqwqw
}

---

否。这不是所需的输出。如何将上面上传的图片转换成带有css的html？这是另一个问题。您必须为每个复选框逐个设置

背景位置

和

背景大小

，以在背景边界中设置该图像的所需部分@Badshah03如何做请？请发布一个新的问题与所需的背景定位细节。您可能需要将该问题的答案与我的答案结合起来，以完成taks@Badshah03