MVC Core 3.1 displaying multiple images with transparency on top of each other as one image

Reply

clemenslinde...

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?

Reply

bruce (sqlwo...

All-Star

55514 Points

14257 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.

bruce (sqlwork.com)

Reply

Yongqing Yu

Contributor

3660 Points

1042 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.

@{
    ViewData["Title"] = "Transbox";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .main-background {
        min-width: 1000px;
        min-height: 800px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .main-background,.transparent-div  {
        background-image: url(../Images/sky.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        background-size: cover;
    }

    .demo-holder {
        position: relative;
        width: 500px;
        height: auto;
        float: left
    }

    .img-size {
        display: block;
        width: 100%;
        height: 240px;
    }

    .transparent-div {
        position: absolute;
        top: 0;
        height: 100%;
        padding: 25px;
        text-align: center;
    }
    .left {
        left: 45%; 
        width:55%;
    }
    .right {
        left: 0; 
        width:25%
    }
</style>


<div class="main-background">
    <div class="demo-holder">
        <img class="img-size" src="~/Images/car.jpg" />
        <div class="transparent-div left"></div>
    </div>
    <div class="demo-holder"> 
        <img class="img-size" src="~/Images/bike.jpeg" />
        <div class="transparent-div right"></div>
    </div>
</div>

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.

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.

Reply

clemenslinde...

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

Hi Yongqing,

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

Reply

Yongqing Yu

Contributor

3660 Points

1042 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:

@{
    ViewData["Title"] = "Transbox1";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Transbox1</h1>
<style>

    .main-background {
        min-width: 500px;
        min-height: 300px;
    }
     
    .demo-holder {
        position: relative;
        left: 0;
        top: 0;
    }
    .left-car {
        width: 120px;
        height: 300px;
        overflow: hidden;
        float:left
    }
    .right-car {
        width: 120px; 
        height: 300px;  
        overflow: hidden; 
    } 

    .img-size-right {
        margin: 0 0 0 -320%; 
    }
     
</style>
<div class="main-background">
    <div class="demo-holder">
        <div class="left-car">
            <img class="img-size-left" src="~/Images/Car_bike.PNG" width="500" height="300" />
        </div>
        <div class="right-car">
            <img class="img-size-right" src="~/Images/Car_bike.PNG" width="500" height="300" />
        </div>
    </div> 
</div>

Here is the result :

I still suggest you use the PS tool, because using CSS is very complicated for your needs.

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.

Reply

clemenslinde...

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

Hi Yongqing,

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

Reply

Yongqing Yu

Contributor

3660 Points

1042 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.

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.

Reply

clemenslinde...

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

Hi Youngqing,

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

Reply

Yongqing Yu

Contributor

3660 Points

1042 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.

<style>

    .imgs {

        width: 277px;

        height: 277px;

        border: 10px solid transparent;

        text-align:center;

        vertical-align:central;

        margin-left:15px;

    }

    .first {

        border-image: url('images/wood.jpg') 30 round;

    }

    .second {

        border-image: url('images/metal.png') 30 round;

    }

 

    </style>

        <div class="row">

            <div class="imgs first">

                <img src="~/Images/Car.jpg" width="257" height="257" />

            </div>

            <div class="imgs second">

                <img src="~/Images/Bike.jpg" width="257" height="257"/>

            </div>

        </div>

Here is the result:

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.

Reply

clemenslinde...

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

Hi Yongqing,

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

MVC Core 3.1 displaying multiple images with transparency on top of each other as one image RSS

9 replies

Shortcuts

Related Links

MVC Core 3.1 displaying multiple images with transparency on top of each other as one image

Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image

Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image

Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image

Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image

Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image

Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image

Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image

Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image

Re: MVC Core 3.1 displaying multiple images with transparency on top of each other as one image