Html 在图像上移动时如何查看div的背景色

我的代码：

HTML:

---

我有一个图像，我想尝试在图像上移动一个div。我的Div[with class d2]已在图像上移动，但我看不到它的背景色。如何修复它？

您需要给出第二个div

位置：relative

，以确保正确的堆叠顺序

.d1{
宽度：100px；
高度：100px；
边框：1px实心#000；
溢出：隐藏；
/*背景重复：无重复；
背景位置：50%中心；
背景尺寸：100%自动；
能见度：可见；
*/
}
img{
宽度：100%；
身高：100%；
}
.d2{
利润上限：-50px；
左边距：20px；
背景颜色：绿色；
颜色：蓝色；
位置：相对位置；
}

图1

您需要在

.d2

.d1{
宽度：100px；
高度：100px；
边框：1px实心#000；
溢出：隐藏；
背景重复：无重复；
背景位置：50%中心；
背景尺寸：100%自动；
能见度：可见；
}
img{
宽度：100%；
身高：100%；
}
.d2{
利润上限：-50px；
左边距：20px；
背景颜色：绿色；
颜色：蓝色；
位置：相对位置；
}

图1

<div class="d1">
    <img src="http://i57.tinypic.com/30cw0ut_th.png">
    <div class="d2">
        Pic 1
    </div>
</div>

.d1{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 50% center;
    background-size: 100% auto;
    visibility: visible;
}
img{
    width: 100%;
    height: 100%;   
}
.d2{
    margin-top: -50px;
    margin left: 20px;
    background-color: green;
    color: blue;
}