如果在图像上移动，如何查看 div 的背景颜色

Question

我的代码：FIDDLE

HTML:

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

CSS:

.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;
}

我有一张图片，我想尝试在图片上移动 div。我的 Div [with class d2] 在图像上移动了，但我看不到它的背景颜色。我该如何解决？

Answer 1

你需要给第二个divposition:relative来保证正确的堆叠顺序

.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;
    position: relative;
}

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

Answer 2

您需要在 .d2

上添加 Position:relative

.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;
        position:relative;
}

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

另请参阅下面的 Link
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_relative

如果在图像上移动，如何查看 div 的背景颜色

how to see background color of div when if move on image

html

css

background-color