使用div元素覆盖图像

Question

我的小提琴

http://jsfiddle.net/yjw46/2/

我的目标

我有这种美丽的颜色轮子作为PNG。 （我也把它作为SVG）。单击其中一种颜色时，我希望整个圆圈更改为该颜色。例如，如果单击红色，我希望整个轮子变为红色而不是彩色。

我打算如何做到

我想要一个透明的（在小提琴中它是半透明的，用于调试目的）div形状的圆形（使用border-radius）将直接在我的色轮图像上。当按下一个颜色时，我计划让div停止透明，并且（在一个漂亮的过渡中）转向那种颜色，使它看起来像整个轮子已经改变了颜色。

问题

我无法让div覆盖图像。

因此

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

Answer 1

你非常亲密，只需将position: relative;传递给position: absolute;（在div想要拥有的图片上）来解决问题。

现在请记住，我们需要将父级设为position: relative;，否则绝对定位div将不会位于父级中。你已经设置好这个好去了。

在position: absolute; here上了解详情。

Demo here

#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);
}

---

这是一个小小的演示，展示如果没有relative位置在父级设置absolute的情况下会发生什么。

Demo Without Relative

所以你可以看到孩子不在父母身边。

这是父母的相对位置。

Demo With Relative

在这里，孩子确实留在父母身边。这应该可以帮助您理解为什么您要完成的任务需要它。如有任何问题，请发表评论，我会尽快回复你。

Answer 2

<div id="circleWrap">
  <img src="http://y.emuze.co/circle.png" id="colorCircle"/>
  <div id="circleCover" >
  </div>
</div>

我把你的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);
}

这里有效：http://jsfiddle.net/yjw46/7/

Answer 3

稍微改变你的CSS。

#circleCover {
   top:-304px; 
}

Fiddle

Answer 4

只需在#colorCircle

中添加位置：绝对即可

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