HTML/CSS图片重叠海誓山盟

问题描述：

我有一排四个图像工作，但我想另一行，但它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。谢谢

你是什么意思， “堆栈”？不同的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。

哇！有用。只有一个问题，两行之间有一个微小的差距。除此之外，它的作品！谢谢 – 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>

感谢您的帮助！我会尝试你的灵魂 – WESTKINz

HTML/CSS图片重叠海誓山盟

相关推荐