MVC Core 3.1 I need to display multiple images (with transparency) on top of each other as 1 image
-
LS, I need to display one image that is made up of multiple images with each a transparency. So image one has a bike on the left and the rest of the image is transparent and the second image has a car on the right (again the rest is transparent), then I would need to display one image with a bike on the left and a car on the right. How can I accomplish this in MVC Core 3.1? As the user can select the images that build the total image I cannot prebuild this image. Kind regards, Clemens Linders
-
LS, I need to display one image that is made up of multiple images with each a transparency. So image one has a bike on the left and the rest of the image is transparent and the second image has a car on the right (again the rest is transparent), then I would need to display one image with a bike on the left and a car on the right. How can I accomplish this in MVC Core 3.1? As the user can select the images that build the total image I cannot prebuild this image. Kind regards, Clemens Linders
You could use either CSS or SVG to stack the images on top of each other. If you want to generate a single image on the server then you'll need to use a graphics library which is compatible with .NET Core to do it. For example:
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
You could use either CSS or SVG to stack the images on top of each other. If you want to generate a single image on the server then you'll need to use a graphics library which is compatible with .NET Core to do it. For example:
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Hi Richard, Just how would I do this in CSS or SVG? Kind regards, Clemens Linders
-
Hi Richard, Just how would I do this in CSS or SVG? Kind regards, Clemens Linders
Assuming you want the images to be centred within their containing block, try something like this:
<div class="image-stack">
<img src="..." />
<img src="..." />
...
</div>.image-stack {
position: relative;
/* Use whatever size you want: */
width: 500px;
height: 500px;
}
.image-stack img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}In this case, the images need to be listed in order from bottom to top; each subsequent image will appear on top of the previous image. Another option would be to use multiple background images:
<div class="image-stack"></div>
.image-stack {
/* Use whatever size you want: */
width: 500px;
height: 500px;background-image: url('...'), url('...'), ...;}
NB: In this case, the images need to be listed in order from top to bottom. Using multiple backgrounds - CSS: Cascading Style Sheets | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
Assuming you want the images to be centred within their containing block, try something like this:
<div class="image-stack">
<img src="..." />
<img src="..." />
...
</div>.image-stack {
position: relative;
/* Use whatever size you want: */
width: 500px;
height: 500px;
}
.image-stack img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}In this case, the images need to be listed in order from bottom to top; each subsequent image will appear on top of the previous image. Another option would be to use multiple background images:
<div class="image-stack"></div>
.image-stack {
/* Use whatever size you want: */
width: 500px;
height: 500px;background-image: url('...'), url('...'), ...;}
NB: In this case, the images need to be listed in order from top to bottom. Using multiple backgrounds - CSS: Cascading Style Sheets | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Hi Richard, Thanks for your effort. I currently have no development PC at my disposal. But it looks very easy and logical. I will give this a try asap and I expect no troubles. Kind regards, Clemens Linders
