Question

我正在使用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;}

Answer 1

尝试添加

figure img {
display:block;
}

Answer 2

您可以像这样添加

Figcaption{margin:0; padding:0}

使用转换时，Figcaption有margin-top，无法弄清楚原因

2 个答案: