2016-10-17 5 views
-1

У меня есть коллекция изображений тепловой карты, где мне нужно разместить над изображением изображение, единственная проблема в том, что я не могу наложить коллекцию изображений друг на друга с помощью css, но идеальным результатом будет для объединения коллекции изображений bsae64 в один.Изображения на стеке одного или слияния base64 images

Пример мой код:

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

@endforeach 
+0

Почему вы не можете использовать CSS, используя позицию: абсолютная и г-индекс? Каково поведение, которое происходит? – nixkuroi

+0

Хорошо ... Удачи вам в этом? У вас возникли вопросы? Этот сайт предназначен для вопросов, а не для размещения вашего списка дел. –

+0

@nixkuroi Я уже пробовал, что, в основном, я пытался увеличивать в цикле foreach z-index, а также помещать позицию в абсолютную величину, но не работает. – Pedro

ответ

0

Одним из вариантов является использование 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"> 
+0

Его не работает, у меня есть коллекция изображений (8), и я уже пробовал эти 2 примера и еще ничего – Pedro

0

Я решил решить проблему, но используя фон в 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; */