I need to display one image that is made up of two or three images with each a transparency.
So picture one has a car on the left and the rest of the picture is transparent and the second picture has a bike on the right (again the rest is transparent), then I would need to display one picture with a car on the left and a bike on the right.
Unrelated to mvc. It’s just html and css. First the images need to be transparent. Then with css you can position them on top of each other. Review css position absolute.
According to your description, I am not very clear about your needs.
If you want to make a part of the picture transparent, I made an example for your reference, but
some precise values require you to changeaccording to your picture.
Indeed I want the bike and the car in the same picture, but I do not want to delete the space in between.
So the result is a picture with the same size as the original.
Would that require a different setup?
PS you say that it is better to use PS tool. But I have no experience with PS tool.
Is your original picture one or two? Whether car and bike are on the same picture or two pictures respectively, please clarify in detail, or provide us with your original picture for reference.
Best Regards,
YongQing.
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Let me be more precise. A friend of mine wants to sell picture frames that you can hang on the wall or set on your desk.
These frames can have different components.
The outer side could be for instance metal or wood in different colors and than you would have a big square with a hole in it where you would place the picture.
This square comes also in different colors and materials.
So the idea is to have pictures of the edges of the frames where the inside is transparent.
Than we would have pictures of the big square where the frame is transparent and also the hole in the middle.
In the hole in the big square we will place a standard picture.
But now the customer can select the outer edges of the frame and he or she will see how this looks with the selected big square.
In Dutch we call this big square a passpartout (french) but I'm not sure if the English use the same word.
None
0 Points
7 Posts
MVC Core 3.1 displaying multiple images with transparency on top of each other as one image
Apr 14, 2020 07:10 AM|clemenslinders|LINK
Hi,
I need to display one image that is made up of two or three images with each a transparency.
So picture one has a car on the left and the rest of the picture is transparent and the second picture has a bike on the right (again the rest is transparent), then I would need to display one picture with a car on the left and a bike on the right.
How can I accomplish this in MVC Core 3.1?
All-Star
58484 Points
15809 Posts
Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image
Apr 14, 2020 02:39 PM|bruce (sqlwork.com)|LINK
Unrelated to mvc. It’s just html and css. First the images need to be transparent. Then with css you can position them on top of each other. Review css position absolute.
Contributor
3720 Points
1043 Posts
Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image
Apr 15, 2020 09:02 AM|Yongqing Yu|LINK
Hi, clemenslinders
According to your description, I am not very clear about your needs.
If you want to make a part of the picture transparent, I made an example for your reference, but some precise values require you to change according to your picture.
Before transparency:
After transparency:
If you want the picture to be segmented very accurately, then CSS will not be the best choice, and using the PS tool will be more convenient.
If this is not your requirement, please describe in detail, it is best to add pictures for our reference.
Best Regards,
YongQing.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
7 Posts
Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image
Apr 15, 2020 10:02 AM|clemenslinders|LINK
Thanks for your sample.
At this moment I do not have a development PC at my disposal.
It is almost exactly what I need. The car picture you gave the class transparent-div left and the bike transparent-dive right.
If I were to give both images the class transparent-dive left would I than see a part of the car and than the bike?
I need two pictures identical in says layered on top of each other.
As mentioned I cannot test it right now but I think/hope this does indeed the trick.
Thanks for your effort.
Kind regards,
Clemens Linders
Contributor
3720 Points
1043 Posts
Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image
Apr 16, 2020 06:07 AM|Yongqing Yu|LINK
Hi clemenslinders,
You mean that car and bicycle are in the same picture, but there is a gap between them.
Do you want to delete the middle gap picture and let bicycles and cars show together?
If so, I have made the following cases for your reference.
This is the original picture:
Here is the code:
Here is the result :
I still suggest you use the PS tool, because using CSS is very complicated for your needs.
Best Regards,
YongQing.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
7 Posts
Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image
Apr 16, 2020 06:22 AM|clemenslinders|LINK
Indeed I want the bike and the car in the same picture, but I do not want to delete the space in between.
So the result is a picture with the same size as the original.
Would that require a different setup?
PS you say that it is better to use PS tool. But I have no experience with PS tool.
How would I do this using PS tool?
Kind regards,
Clemens Linders
Contributor
3720 Points
1043 Posts
Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image
Apr 16, 2020 09:37 AM|Yongqing Yu|LINK
Hi clemenslinders,
I am confused about your needs.
Is your original picture one or two? Whether car and bike are on the same picture or two pictures respectively, please clarify in detail, or provide us with your original picture for reference.
Best Regards,
YongQing.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
7 Posts
Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image
Apr 16, 2020 09:52 AM|clemenslinders|LINK
The car and bike are 2 pictures.
Let me be more precise. A friend of mine wants to sell picture frames that you can hang on the wall or set on your desk.
These frames can have different components.
The outer side could be for instance metal or wood in different colors and than you would have a big square with a hole in it where you would place the picture.
This square comes also in different colors and materials.
So the idea is to have pictures of the edges of the frames where the inside is transparent.
Than we would have pictures of the big square where the frame is transparent and also the hole in the middle.
In the hole in the big square we will place a standard picture.
But now the customer can select the outer edges of the frame and he or she will see how this looks with the selected big square.
In Dutch we call this big square a passpartout (french) but I'm not sure if the English use the same word.
Hope I made it clear.
Thanks.
Clemens Linders
Contributor
3720 Points
1043 Posts
Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image
Apr 21, 2020 01:33 AM|Yongqing Yu|LINK
Hi, clemenslinders
According to your description, do you want to use the picture as the border ?
Here is an example , please refer to it.
Here is the result:
Best Regards,
YongQing.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
7 Posts
Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image
Apr 21, 2020 06:57 AM|clemenslinders|LINK
An interesting approach, but not what I had in mind.
But with your help I was able to do exactly what I wanted so many thanks for your effort.
I could not have done it without you.
Thanks,
Clemens