使2個圖像重疊

我使用JS編寫HTML代碼，我需要顯示2個完全重疊的圖像。使2個圖像重疊

兩者的高度和寬度都相同。我可以用什麼CSS屬性來做到這一點？

來源

2012-03-23 code4fun

「我使用JS寫HTML代碼」 ...... hmmmmm？ – 2012-03-23 19:43:38

可能的重複：http://stackoverflow.com/questions/4010624/overlap-images-in-css – shaunsantacruz 2012-03-23 19:43:52

我很困惑。你正在使用JavaScript來創建兩個你想直接顯示在彼此之上的圖像元素？ – MetalFrog 2012-03-23 19:44:01

與CSS播放圍繞在此：

http://jsfiddle.net/zuZxD/

我以前的不透明度來顯示重疊。

來源

2012-03-23 19:50:34 Undefined

（BTW我混合了頂部和底部哈哈） – Undefined 2012-03-23 19:52:20

<style> 
.imageoverlap{ 

position: absolute; 
top:100px; 

} 
</style> 
... 
<div class='imageoverlap'> 
image1 
</div> 
<div class='imageoverlap'> 
image2 
</div>

嘗試是：d

來源

2012-03-23 19:44:59 craighandley

您顯然會將'top'子句更改爲您想要的位置，也可能使用'left'和'right'。與它一起玩吧。 – craighandley 2012-03-23 19:47:03

如果您將位置設置爲絕對位置，則可以控制要放置的位置。

<style> 
    #overlay{position:absolute; top:0px;} 
</style> 

<div id="layer1"><img src="img1.png"></div> 
<div id="overlay"><img src="overlay_image.png"></div>

現在，您需要定位在要它#overlay，通過設置左上位置，即，頂：0像素，左起：300像素;

來源

2012-03-23 19:55:59 Vlad

相對位置在容器上，和絕對的圖片：

以上所有的答案都丟失，你需要一個父元素比靜態以外的其他位置上，否則你會被他們定位的事實絕對的瀏覽器窗口，我認爲你不想這樣做。

position: absolute將給你在最接近的父母的容器中的某種位置的位置。所以我們給父母position:relative;沒有聲明頂部或底部，這樣它將從通常的位置（即沒有改變，但仍然聲明position）將0px關閉。

<div id="container"> 
    <img src="data:image/png;base64,R0lGODlhAQABAPAAAC+byy+byywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;"> 
    <img class="hide" src="data:image/png;base64,R0lGODlhAQABAPAAADCQIzCQIywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;"> 
</div> 

#container{ 
    position:relative; 
} 
#container img{ 
    position:absolute; 
    top:0; 
    left:0; 
} 
.hide:hover{ 
    opacity:0; 
}

http://jsfiddle.net/BLbhJ/1/

編輯：增加你的隱藏功能

來源

2012-03-23 20:00:30

+1很好的答案，很好的寫出全面。 – 2013-07-02 21:36:50

使2個圖像重疊

回答

相關問題