我尝试使用以下设置跨越两个图像之间褪色：CSS：影像使用“位置绝对”隐藏内容

<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”相同的高度。

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

来源

2014-07-17 user18490

为段落标记添加一个“margin-top”，以将其向下推得足够远，使其出现在图片下方。 – APAD1

当然，但我需要一些自动的，因为我可能会使用这个设置很多，图像的高度可能会改变，所以我不能每次使用交叉淡入淡出设置时这样做（因为这意味着我将不得不调整的东西每次手）。一定会有更好的办法？！ – user18490

将'position：absolute;'仅应用于其中一个图像（您希望位于顶部的图像）而不是两者，这样相对定位的图像将设置'cf'容器的高度。 – APAD1

扩展我上面的评论，如果您只在其中一个图像上设置了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; 
}

来源

2014-07-17 16:11:34 APAD1

的元素谢谢。我将更新后的代码添加到您的答案中。如果你可以接受编辑。 – user18490

没问题，很高兴你把它排序:) – APAD1

你的问题是，由于使用的是position:absolute;为你的形象，他们不占用任何高度在你的DIV ，因此你的div没有高度，段落出现在图像后面。您只能将顶部图像设为绝对图像，这样可以解决您的问题。给#cf position:relative;在其CSS：

#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

来源

2014-07-17 16:12:29

提议APAD1只需添加

#cf img.top { 
    position: relative; 
}

如果你的图像不一样尺寸这可能不会很好。

来源

2014-07-17 16:12:39

是的，当然，他们在这种情况下有相同的维度，希望有一个问题我不必处理。谢谢。 – user18490

CSS：影像使用“位置绝对”隐藏内容

回答

JSFiddle

相关问题