Html 使用div元素覆盖图像 我的小提琴

我的目标 我有这个美丽的颜色轮作为一个PNG。（我还将其作为SVG）。单击其中一种颜色时，我希望整个圆圈都变为该颜色。例如，如果单击红色，我希望整个控制盘变为红色而不是彩色

我打算怎么做 我希望有一个圆形的透明（在小提琴中是半透明的，用于调试）div（使用

边框半径

），它将直接出现在我的彩色滚轮图像上。当按下一种颜色时，我计划让div停止转换，并（在一个漂亮的过渡中）切换到该颜色，使其看起来整个轮子都改变了颜色

问题 我无法让div覆盖图像

所以

---

我很高兴听到为什么我的技术不起作用，或者如果你有一个更好的技术，我会很高兴听到。

稍微改变你的CSS

#circleCover {
   top:-304px; 
}

---

这就是它的作用：

你非常接近，只需改变

位置：相对至
位置：绝对
（在
div
上，您希望覆盖图像）以修复问题

现在请记住，我们需要将父对象设置为
position:relative
或绝对定位的
div
将不位于父级。你已经设置好了，可以开始了

有关
位置：绝对位置的更多信息



下面是一个小演示，演示如果在父对象上不设置
相对
位置，并且子对象具有
绝对
，将会发生什么


因此，您可以看到，孩子并没有停留在家长的范围内

这是相对位置的父对象


在这里，孩子确实呆在父母体内。这将有助于您理解为什么您要完成的任务需要这样做。如有任何问题，请留下评论，我会回复您。
只需在颜色圈中添加位置：绝对

#colorCircle {
    position: relative;
    top: 0px; left: 0px;
    z-index: 1;
    width: 300px;
    height: 300px;
    position:absolute;
}

你打算如何检测点击的女巫颜色？使用我没有放在小提琴中的
，这可能对你的目标有用，在图像上获得div，只需将其设置为绝对。鲁迪，我没看到你的答案，很抱歉。此外，它不是复制版本。那就去拿价格吧。这是一个简洁的回答，解释得很好。很高兴你和我讲和：）
#colorCircle {
    position: relative;
    top: 0px; left: 0px;
    z-index: 1;
    width: 300px;
    height: 300px;
    top:0px;
}

#circleWrap {
    position: relative;
    top: 0px;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

#circleCover {
    width: 300px;
    height: 300px;
    position: relative;
    top: -302px; left: 0px;
    z-index: 2;
    border-radius: 150px;
    background-color: rgba(0, 0, 0, 0.2);
}

#circleCover {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0px; left: 0px;
    z-index: 2;
    border-radius: 150px;
    background-color: rgba(0, 0, 0, 0.2);
}

#colorCircle {
    position: relative;
    top: 0px; left: 0px;
    z-index: 1;
    width: 300px;
    height: 300px;
    position:absolute;
}