堆棧圖像一個或合併base64圖像

-1

我有一個熱圖圖像的集合，我需要放置在圖像的上方，唯一的問題是，我無法用css重疊圖像集合，但完美的結果是將bsae64圖像集合合併爲一個。堆棧圖像一個或合併base64圖像

示例我的代碼：

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

@endforeach

來源

2016-10-17 Pedro

爲什麼你不能使用CSS使用的位置是：絕對的，z-index的？發生了什麼行爲？ – nixkuroi

好的...祝你好運？你有問題嗎？這個網站是爲了問題，而不是一個地方轉儲你的待辦事項列表。 –

@nixkuroi我已經嘗試過了，基本上我試着在foreach循環中增加z-index，並且把位置放在絕對位置，但是並不工作。 – Pedro

一種選擇是使用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">

來源

2016-10-17 18:06:03 paing

它不工作，我喜歡一個圖像集合（8），我已經試過這2個例子，仍然沒有 – Pedro

我解決了我的解決方案，但在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; */

來源

2016-10-17 18:24:32 Pedro

堆棧圖像一個或合併base64圖像

回答

相關問題