我嘗試使用以下設置跨越兩個圖像之間褪色：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

相關問題