JSFiddle

Question

我正尝试使用以下设置在两个图像之间进行淡入淡出：

<div id="cf">
    <img class="botton" src="images/img1.png?" />
    <img class="top" src="images/img2.png?" />
</div>

<p>this text is actually hidden but it should be visible and appear right after the image.</p>

CSS：

#cf {
  position:relative;
}

#cf img {
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
      opacity:0;
}

交叉淡入淡出效果不错，因为我似乎使用“绝对位置”，图像后面的文本实际上位于图像下方（图像呈现在文本的顶部）。所以看起来文本实际上位于与div id =“cf”相同的高度。

我该如何解决这个问题？谢谢。

Answer 1

扩展我上面的评论，如果您只在其中一张图片上设置position:absolute，相对定位的图片将设置容器的高度，您仍然可以获得所需的效果。

.top {
    position:absolute;
    left:0;
    top:0;
}

JSFiddle

OP将他的解决方案添加到答案：

#cf {
  position:relative;
}

#cf img {
    position:relative;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

#cf img.top {
    position:absolute;
    top:0;
    left:0;
}

Answer 2

你的问题是，因为你正在使用position:absolute;作为你的图像，它们不占用你的div中的任何高度，因此你的div没有高度，并且段落出现在图像后面。您可以只使顶部图像是绝对的，这将解决您的问题。在其CSS中提供#cf position:relative;：

#cf{
    position:relative;
}

然后仅应用相对于顶部图像的位置：

#cf .top {
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    top:0px;
    left:0px;
}

JSFiddle Demo

Answer 3

正如APAD1所建议的那样，只需添加

#cf img.top {
  position: relative;
}

如果您的图片尺寸不同，则可能效果不佳。

CSS：图像使用＆＃39;位置绝对＆＃39;隐藏内容

3 个答案:

JSFiddle