Question

我一直在寻找，但没有找到我遇到的具体问题的答案。

我想在我的艺术博客上使用滑动字幕。挑战在于我需要容器来适应可变图像高度，所以每次发布新内容时我都不必手动设置它。到目前为止我的工作真的很接近......但

无论图像的高度如何，div都比图像大5个像素。我将div背景设为红色，因此很容易看到重叠，但我无法弄清楚这5个像素的来源。

我真的很陌生并改变了我能想到的所有css值并搜索了其他例子，但我仍然无法让重叠消失。任何帮助都是极好的。我很亲密（我想），但我不知道还有什么可以尝试的。这里有大部分带有jsfiddle链接的CSS：

/* variable container adapts to image size (plus 5 unwanted pixels) */
/* I made the background red so you can see where it's too big */
div#imgContainer {
    min-width: 20px;
    min-height: 20px;
    display:inline-block;
    background:red;
}

.postContainer {
position:relative;
overflow:hidden;
background: red;
}

.postContainer .postTextbox {
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
margin-bottom:-15%;
margin-left:auto;
margin-right:auto;
opacity: 0;
border:0px;
background: black;
}

.postContainer:hover .postTextbox {
margin-bottom:0;
opacity: 1;
}

.postTextbox {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

http://jsfiddle.net/nun243j1/

提前再次感谢！

Answer 1

可能是因为元素之间存在空白。为图片应用image {display: block;}以解决此问题。

滑动字幕：无法获得div以完美匹配图像

1 个答案: