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

  • Question

  • User-2074652801 posted

    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? 

    Tuesday, April 14, 2020 7:10 AM

All replies

  • User-474980206 posted

    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.

    Tuesday, April 14, 2020 2:39 PM
  • User665608656 posted

    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- top;
            background-attachment: fixed;
            background-size: cover;
        }
    
        .demo-holder {
            ;
            width: 500px;
            height: auto;
            float: left
        }
    
        .img-size {
            display: block;
            width: 100%;
            height: 240px;
        }
    
        .transparent-div {
            ;
            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.

    Wednesday, April 15, 2020 9:02 AM
  • User-2074652801 posted
    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

    Wednesday, April 15, 2020 10:02 AM
  • User665608656 posted

    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 {
            ;
            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.

    Thursday, April 16, 2020 6:07 AM
  • User-2074652801 posted
    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
    Thursday, April 16, 2020 6:22 AM
  • User665608656 posted

    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.

    Thursday, April 16, 2020 9:37 AM
  • User-2074652801 posted
    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
    Thursday, April 16, 2020 9:52 AM
  • User665608656 posted

    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.

    Tuesday, April 21, 2020 1:33 AM
  • User-2074652801 posted
    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
    Tuesday, April 21, 2020 6:57 AM