How to overlay 2 png images with overlay so new combined colour where they not both transparent

Posted on 2014-08-24
Last Modified: 2014-09-11
Looking to combine 2 .png images of the same size and each has a transparent area into one single image.

Where the 2 images overlap I want to create a combine a colour that both pixels would make if they were mixed as paint (or any other combining feature colour)
but not to have the each image dimmed / lightened when it does not overlap pixels but shown at full strength colours.

Question by:stephenwilde
    LVL 58

    Expert Comment

    Don't know what you mean by combine a colour

    <div class="wrapper">
        <img src="image.png">
        <img src="image.png">

    Open in new window

    .wrapper {
    .wrapper img {

    Open in new window

    LVL 55

    Expert Comment

    by:Jaime Olivares
    Besides the positioning stuff, you can use HTML5/CSS3 blending, although it may not work in old browser versions. Some tutorial:

    Author Comment

    Thanks for replies but I have not explained the problem well enough.

    It is when you add 2 separate images and combine into one single image.

    It is like using 2 layers in Photoshop and producing one final image.

    So would expect solution to be in c# .net, when the images are combined.
    LVL 35

    Accepted Solution

    Well, assuming you mean combine colors like this:
    Additive coloring on wikipediaHere's some C# code to do that. There are simpler ways to combine images (using Graphics.DrawImage) but I can't find a way to do color blending like that with those functions, only alpha blending which does not seem to be what you want. That's the reason for the (slow) manual processing of each pixel.
    // make sure these are included at the top of your code
    using System;
    using System.Drawing;
    using System.Drawing.Imaging;
    using System.Windows.Forms;
    // call this from your code, Main, Form_Load or Button_Click for example
    doMix(new string[] { "r.png", "g.png", "b.png" });
    // the function that does the work
            private void doMix(string[] imageArray) {
                try {
                    Bitmap[] bmSrcs = new Bitmap[imageArray.Length];
                    // read all files into memory
                    for (int b = 0; b < bmSrcs.Length; b++) {
                        bmSrcs[b] = new Bitmap(imageArray[b]);
                    Bitmap bmDst = new Bitmap(bmSrcs[0].Width, bmSrcs[0].Height);
                    for (int y = 0; y < bmSrcs[0].Height; y++) {
                        for (int x = 0; x < bmSrcs[0].Width; x++) {
                            int a = 0, r = 0, g = 0, b = 0, iCount = 0;
                            foreach (Bitmap bmSrc in bmSrcs) {
                                Color colSrc = bmSrc.GetPixel(x, y);
                                // check alpha (transparency): ignore transparent pixels
                                if (colSrc.A > 0) {
                                    a += colSrc.A;
                                    r = Math.Max(r, colSrc.R);
                                    g = Math.Max(g, colSrc.G);
                                    b = Math.Max(b, colSrc.B);
                            Color colDst = Color.FromArgb(iCount > 1 ? (int)Math.Round((double)a / iCount) : a, r, g, b);
                            bmDst.SetPixel(x, y, colDst);
                    bmDst.Save("result.png", ImageFormat.Png);
                catch (Exception ex) {
                    MessageBox.Show(ex.ToString(), ex.Message, MessageBoxButtons.OK, MessageBoxIcon.Error);

    Open in new window

    The 3 files I used as input are attached, the result looks like this:
    resulting imager.png

    Author Closing Comment

    Thank you very much for such a full answer and explanation, much appreciated.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    We all know that functional code is the leg that any good program stands on when it comes right down to it, however, if your program lacks a good user interface your product may not have the appeal needed to keep your customers happy. This issue can…
    Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
    To add imagery to an HTML email signature, you have two options available to you. You can either add a logo/image by embedding it directly into the signature or hosting it externally and linking to it. The vast majority of email clients display l…
    Sending a Secure fax is easy with eFax Corporate ( First, Just open a new email message.  In the To field, type your recipient's fax number You can even send a secure international fax — just include t…

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now