时间戳

首页 > 解决方案 > 在 ngFor list Angular 中将一张图片放在另一张图片下方

html - 在 ngFor list Angular 中将一张图片放在另一张图片下方

问题描述

我有一个元素列表（图像），它看起来像 4x4 网格（数组的长度是 16，所以我有 16 个图像）。

<ul id="thumbnailsList">
  <li *ngFor="let key of array" >
    <img  [src]="img" class="tn">
  </li>
</ul>

这是我的CSS：

ul { padding:0; width:780px; margin:20px auto}
li { display:inline;}
.tn{
  margin:2px 2px;
  box-shadow:#999 1px 1px 3px 1px;
  cursor: pointer;
  width: 191px;
  height: 146px;

}

我现在有这样的看法： 网格

接下来，我想放置另一个图像（另一个网格 - 网格 2），其中的每个元素将完全覆盖第一个网格中的每个图像。

我找到了我需要的这个解决方案http://jsfiddle.net/uS7nw/2/，但我无法在 Angular 中正确实现它——我用 CSS 玩了很多，但每次它都不起作用。

所以，本质上，它应该看起来像 

<ul id="thumbnailsList">
  <li *ngFor="let key of array" >
    <img  [src]="img" class="tn">
    <img  [src]="img2" class="secondImg">
  </li>
</ul>

你能帮我调整CSS吗？PS。我不需要动态条件绑定 <img [src]="option == true? img : img2">，但我只需要 2 个图像，一个在另一个之上

标签： htmlcssangular

解决方案

以下应该有效：

ul { padding:0; width:780px; margin:20px auto}
li { 
  display:inline-block;
  position: relative;
}

li, li img {
  width: 191px;
  height: 146px;
}

.tn, .secondImg {
  position: absolute;
  margin:2px 2px;
  box-shadow:#999 1px 1px 3px 1px;
  cursor: pointer;
}

图像绝对位于 in 内li，因此它们位于彼此之上。

您可以在这里看到 StackBlitz：https ://stackblitz.com/edit/angular-dykmxm?file=src%2Fapp%2Fapp.component.css

您可以添加一个 z-index 属性，.tn或者.secondImage如果您想控制哪个位于顶部

推荐阅读