我正在使用 figure 和 figcaption 在图像上转换标题，并且转换效果很好，但是 figcaption 背景位于实际图像之外几个像素（在顶部）。
我查看了我的代码并更改了边距、填充和位置设置，但我无法弄清楚为什么 figcaption 背景在转换时被向下移动。
这是我的 HTML 代码：
<figure>
<img src="images/melon.jpg" alt="melon"></a>
<figcaption>
<h3><a href="mywebsite.com">Live Demo or Buy Now</a></h3>
</figcaption>
</figure>
这是我的CSS
figure {
cursor: pointer;
margin: 0;
overflow: hidden;
position: relative;
float: left;}
figure:hover figcaption {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
bottom: 0;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
figure a {
color: white;
text-decoration: none;
}
figcaption {
background-color: rgba(46, 204, 113, .6);
height: 183px;
opacity: 0;
position: absolute;
bottom: -100%;
width: 360px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: all .4s ease-in;
-moz-transition: all .4s ease-in;
-o-transition: all .4s ease-in;
-ms-transition: all .4s ease-in;
transition: all .4s ease-in;
}
figcaption h3 {
background-color: rgba(0, 0, 0, .4);
font-family: 'Lato', sans-serif;
font-weight: 300px;
left: -100%;
margin: 0;
margin-top: 63px;
padding: 10px 20px;
position: relative;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
-ms-transition: all .4s;
transition: all .4s;
-webkit-transition-delay: .5s;
-moz-transition-delay: .5s;
-o-transition-delay: .5s;
-ms-transition-delay: .5s;
transition-delay: .5s;
}
figure:hover h3 {
left: 0;}