HTML/CSS圖片重疊海誓山盟

-1

我有一排四個圖像工作，但我想另一行，但它overlapp對方這樣 HTML/CSS圖片重疊海誓山盟

這就是我想要實現

的index.html

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<link rel="stylesheet" type="text/css" href="CSS/main.css"> 
</head> 
<body> 
<ul> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#contact">Contact</a></li> 
</ul> 
<div class="main_image"></div> 
<div class="image123"> 
    <div class="imgContainer"> 
     <img class="bottom" src="Image/test_image_slot.jpg"/> 
     <img class="top" src="Image/light_bokeh_edit.jpg"/> 
     <p>This is image 1</p> 
    </div> 
    <div class="imgContainer"> 
     <img class="bottom" src="Image/test_image_slot.jpg"/> 
     <img class="top" src="Image/dancing.jpg"/> 
     <p>This is image 2</p> 
    </div> 
    <div class="imgContainer"> 
     <img class="bottom" src="Image/test_image_slot.jpg"/> 
     <img class="top" src="Image/applecloud.jpg"/> 
     <p>This is image 3</p> 
    </div> 
    <div class="imgContainer"> 
     <img class="bottom" src="Image/test_image_slot.jpg"/> 
     <img class="top" src="Image/chair.jpg"> 
     <p>This is image 4</p> 
    </div> 
</div> 
<div class="image123"> 
    <div class="imgContainer"> 
     <img class="bottom" src="Image/test_image_slot.jpg"/> 
     <img class="top" src="Image/light_bokeh_edit.jpg"/> 
     <p>This is image 1</p> 
    </div> 
    <div class="imgContainer"> 
     <img class="bottom" src="Image/test_image_slot.jpg"/> 
     <img class="top" src="Image/dancing.jpg"/> 
     <p>This is image 2</p> 
    </div> 
    <div class="imgContainer"> 
     <img class="bottom" src="Image/test_image_slot.jpg"/> 
     <img class="top" src="Image/applecloud.jpg"/> 
     <p>This is image 3</p> 
    </div> 
    <div class="imgContainer"> 
     <img class="bottom" src="Image/test_image_slot.jpg"/> 
     <img class="top" src="Image/chair.jpg"> 
     <p>This is image 4</p> 
    </div> 
</div> 
</body>

的main.css

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #360836; 
    text-align:center; 
} 

li { 
    display:inline; 
} 

li a { 
    display: inline-block; 
    color: #d14977; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
} 

li a:hover { 
    color: white; 
} 

div.main_image { 
content:url(../Image/everest.jpg); 
    max-width: 100%; 
    height: auto; 
    width: auto\9; 
} 

.imgContainer{ 
    float:left; 
    width:25%; 
    position:relative; 
    margin:0 auto; 

} 

.imgContainer img{ 
    max-width:100%; 
    height: auto; 
    position:absolute; 
    left:0; 
    -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; 
} 

.imgContainer img.top:hover { 
     opacity:0; 
}

我怎樣才能使兩行或圖像的甚至超過兩行棧互不重疊。我想實現這只是使用CSS和HTML，我不想使用JavaScript或jQuery。謝謝

來源

2015-12-10 WESTKINz

你是什麼意思，「堆棧」？不同的z索引？那有資格作爲「重疊」... –

喜歡一行4 img和另一行4 img不重疊 – WESTKINz

什麼規則適用於'.image123'？如果浮動div，然後擺脫浮動，或打破/清除：在兩行之間。 –

這裏的問題實際上不是由於您的.imgContainer上的float，因爲症狀可能首先是誤導。

您看到的行爲實際上是因爲您將position:absolute放置在您的所有.imgContainer img元素上，這意味着它們會從文檔流中取出，並且不會影響父母的身高。（容器的高度不低於0的原因是因爲每個.imgContainer中的<p>仍然佔用空間。）因此，圖像因爲其父母比他們短而相互重疊。

我的建議是隻適用position:absolute到頂部出現的圖像（而不是頂部和底部），並且還應用position:absolute到<p>，因此它可以被定位在圖像的頂部（也不會在圖像正確定位後在圖像行之間結束）。

所以CSS聲明塊我想補充/改寫爲：

.imgContainer img{ 
    /* position:absolute removed */ 
    display:block 
    max-width:100%; 
    height: auto; 
    -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; 
} 

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

.imgContainer p { 
    position: absolute; 
    margin: 0; 

    /* So the element doesn't block hover event of image */ 
    pointer-events: none; 

    /* Vertical centering */ 
    top: 50%; 
    transform: translateY(-50%); 
}

這裏有一個JSFiddle證明。希望這可以幫助！如果您有任何問題，請告訴我。

編輯：通過將display:block應用於子圖像，刪除圖像行之間的垂直間距。來自this StackOverflow question。

來源

2015-12-10 17:08:57 Serlite

哇！有用。只有一個問題，兩行之間有一個微小的差距。除此之外，它的作品！謝謝 – WESTKINz

@WESTKINz哦！這個差距的好處 - 讓我看看我能否解決這個問題。 – Serlite

Awh！ @Serlite，你打敗了我！優秀的答案 –

我不完全確定爲什麼你的代碼給你的結果，它可能有一些與你的圖像的絕對位置。但是我在下面做了一個小小的片段，就是你想要的。我沒有使用img標籤，而是創建了一個像圖像容器一樣的div，併爲該div提供了圖像的背景圖像。我發現它總是使代碼更簡單。當您查看代碼時，請在整頁中查看它，以便更清楚地看到它。

希望這會有所幫助！

.imgContainer{ 
 
    width:100%; 
 
    background-color: red; 
 
    margin-left: 10px; 
 
} 
 
.imgBOX{ 
 
    height:350px; 
 
    width:350px; 
 
    background-image: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/black-and-white-wallpaper-5.jpg); 
 
    background-size: 100% 100%; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
.imgBOX2{ 
 
    height:350px; 
 
    width:350px; 
 
    background-image: url(https://newevolutiondesigns.com/images/freebies/black-white-background-32.jpg); 
 
    background-size: 100% 100%; 
 
    display: inline-block; 
 
    float: left; 
 
}

<div class='imgContainer'> 
 
    <div class='imgBOX'></div> 
 
    <div class='imgBOX'></div> 
 
    <div class='imgBOX'></div> 
 
    <div class='imgBOX'></div> 
 
</div> 
 
<div class='imgContainer'> 
 
    <div class='imgBOX2'></div> 
 
    <div class='imgBOX2'></div> 
 
    <div class='imgBOX2'></div> 
 
    <div class='imgBOX2'></div> 
 
</div>

來源

2015-12-10 17:24:47

感謝您的幫助！我會嘗試你的靈魂 – WESTKINz

HTML/CSS圖片重疊海誓山盟

回答

相關問題