Question

我有一个热图图像集合，我需要放置在图像上方，唯一的问题是我不能用css重叠彼此的图像集合，但完美的结果将是合并bsae64图像的集合一个。

我的代码示例：

@foreach(...)
 <img style="position: absolute;z-index: {{99999 + $key}};" alt="Embedded Image" src="{{$heat->imageBase64}}" />

@endforeach

Answer 1

一种选择是使用opacity而不是z-index。

<img style="position:absolute;top:10px;left:10px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACPSURBVFhH7dixDYAgFABRdEkbxqNxPRdQCzoT9b7ND95rJLHwAgai076VhOZ+TcYswizCLMIswizCLMIswizCLMIswiwiadanz9e2tD66qGvto5D4bN00ne7vPorMFnpkbNpGeeXp6sRW0w2CMIsYJYvuQ//et07vJyB8MiY9qv0BTphFmEWYRZhFpMwq5QAAcB8VENYVogAAAABJRU5ErkJggg==">
<img style="position:absolute;top:10px;left:70px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACaSURBVFhH7dfBDUAwGEDhsoJ1TGYAg5jFMC524NCLA/X+OjTy3kUTh/9LhUaXli21V5+vjSWLJIvUKOuDD8Q+jXl1bZjXvOLV7tad6ezhVrEqVnFwWBZnvRwZk/kmkmSRZJF+x3p5tsSOoKrdKo4MH4u1D/FhcNh05i8GSRZJFkkWSRZJFkkWSRZJFkkWSRZJFkkWSRapSVZKBz/RGgBpmbaeAAAAAElFTkSuQmCC">

<img style="position:absolute;top:10px;left:130px;opacity:0.5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACPSURBVFhH7dixDYAgFABRdEkbxqNxPRdQCzoT9b7ND95rJLHwAgai076VhOZ+TcYswizCLMIswizCLMIswizCLMIswiwiadanz9e2tD66qGvto5D4bN00ne7vPorMFnpkbNpGeeXp6sRW0w2CMIsYJYvuQ//et07vJyB8MiY9qv0BTphFmEWYRZhFpMwq5QAAcB8VENYVogAAAABJRU5ErkJggg==">
<img style="position:absolute;top:10px;left:130px;opacity:0.5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACaSURBVFhH7dfBDUAwGEDhsoJ1TGYAg5jFMC524NCLA/X+OjTy3kUTh/9LhUaXli21V5+vjSWLJIvUKOuDD8Q+jXl1bZjXvOLV7tad6ezhVrEqVnFwWBZnvRwZk/kmkmSRZJF+x3p5tsSOoKrdKo4MH4u1D/FhcNh05i8GSRZJFkkWSRZJFkkWSRZJFkkWSRZJFkkWSRapSVZKBz/RGgBpmbaeAAAAAElFTkSuQmCC">

Answer 2

我解决了我的解决方案，但在css中使用了背景，基本上我就离开了我的解决方案。

背景：

   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);                      /* On bottom, like z-index: 1; */

堆叠图像一个或合并base64图像

2 个答案: