在多个图像的情况下实现图像叠加

我试图让example from w3schools运行，但在我的情况下有多个图像。覆盖显示为整个窗口而不是第一个图像（我计划稍后为所有图像执行此操作）。在多个图像的情况下实现图像叠加

这里是我的代码：

.flex-container { 
 
\t display: flex; 
 
} 
 
.col1 { 
 
\t position: relative; 
 
\t display: block; 
 
} 
 

 
.img1-wrap { 
 
\t display: block; 
 
} 
 

 
.image { 
 
\t display: block; 
 
\t /*width: 100%;*/ 
 
\t height: auto; 
 
} 
 

 
.overlay { 
 
\t display: block; 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t background-color: #008CBA; 
 
\t overflow: hidden; 
 
\t /*width: 100%;*/ 
 
\t height: 20%; 
 
\t transition: .5s ease; 
 
} 
 

 
.img1-wrap:hover .overlay { 
 
\t height: 100%; 
 
} 
 

 
.text { 
 
\t white-space: nowrap; 
 
\t color: white; 
 
\t font-size: 20px; 
 
\t position: absolute; 
 
\t overflow: hidden; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
\t -ms-transform: translate(-50%, -50%); 
 
}

<div class="flex-container"> 
 
\t <div class="col col-1"> 
 
\t \t <div class="img1-wrap"> 
 
\t \t \t <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image"> 
 
\t \t \t <div class="overlay"> 
 
\t \t \t \t <div class="text">Hello World</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image2"> 
 
\t </div> 
 
\t 
 
\t <div class="col col-3"> 
 
\t \t <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image3"> 
 
\t \t <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image4"> 
 
\t </div> 
 
</div>

来源

2017-07-23 m j

[Overlay several images]的可能重复（https://stackoverflow.com/questions/11443002/overlay-several-images） – Regolith

添加position:relative到.img1-wrap并给予一试。

当你定位绝对一个要素，确保其母公司定位相对

CSS

.img1-wrap { 
     display: block; 
     position: relative; 
    }

这是你想才达到Working Fiddle

什么

希望这会有所帮助..

来源

2017-07-23 06:11:45

除了这个解决方案被接受的事实，但它只显示其中一个图像图像被隐藏。你能不能像以前一样保持其他图像的完整性？谢谢 –

看来你并没有使用正确的方式定位。对于每个具有文本容器的元素块，使用relative。

你应该在重组这样的方式您的HTML CSS &：

.flex-container { 
 
\t position: relative; 
 
\t display: flex; 
 
} 
 

 
.img1-wrap { 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t width: 200px; 
 
} 
 

 
.image { 
 
\t width: 100%; 
 
} 
 

 
.overlay { 
 
\t display: block; 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t background-color: #008CBA; 
 
\t overflow: hidden; 
 
\t /*width: 100%;*/ 
 
\t height: 20%; 
 
\t transition: .5s ease; 
 
} 
 

 
.img1-wrap:hover .overlay { 
 
\t height: 100%; 
 
} 
 

 
.text { 
 
\t white-space: nowrap; 
 
\t color: white; 
 
\t font-size: 20px; 
 
\t position: absolute; 
 
\t overflow: hidden; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
\t -ms-transform: translate(-50%, -50%); 
 
}

<div class="flex-container"> 
 
\t <div class="img1-wrap"> 
 
\t \t <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image"> 
 
\t \t <div class="overlay"> 
 
\t \t \t <div class="text">Hello World</div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="img1-wrap"> 
 
\t \t <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image"> 
 
\t \t <div class="overlay"> 
 
\t \t \t <div class="text">Hello World</div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="img1-wrap"> 
 
\t \t <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image"> 
 
\t \t <div class="overlay"> 
 
\t \t \t <div class="text">Hello World</div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="img1-wrap"> 
 
\t \t <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image"> 
 
\t \t <div class="overlay"> 
 
\t \t \t <div class="text">Hello World</div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

希望这有助于这就是你想达到的目标。

来源

2017-07-23 06:16:21

在多个图像的情况下实现图像叠加

回答

相关问题