怎么看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 [与类d2]移动了图像，但我看不到它的背景颜色。我该如何解决它？

Answer 1

您需要给第二个分区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>

Answer 2

您需要在.d2

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

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

添加 Position:relative见下文
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_relative

链接