Create a Transparent Bitmap using BitBlt API
This example shows how to create a transparent bitmap. It starts with a
bitmap of my son and one of a red "T" on a blue background. The "T" is
superimposed over my son allowing his picture to show through its blue
background. Each step along the way is show. The key to this is a
number of GDI functions, most importantly, the BitBlt
(Bit-Block Transfer) API.
Download Source Code
First, we need to display the bitmaps and get a handle to the "T". Two
variables are Dimmed as StdPicture. The
StdPicture object lets you keep an image in memory without having a
picturebox or image control on a form. It also provides a handle property
which is what we need. The bitmaps are stored in the StdPicture
objects using LoadPicture and then assigned to the
picture property of the picturebox controls.
Most GDI (Graphic Device Interface) functions work with Device
Contexts. A device context (DC) is a structure that defines a set of
graphic objects and their attributes, and the graphic modes that affect
output. Also, the DC refers to a physical output device — its name,
device driver, and other attributes. GDI function parameters contain a
handle to a DC to include the attributes of the specified device. There
are four types of DC: display (supports drawing operations on a video display
terminal), printer (supports drawing operations on a printer or plotter),
memory (supports drawing operations on a bitmap), and information (supports
retrieval of device data.) We are interested in memory DCs here.
From here on, I will refer to bitmap of my son as the bitmap and the
image of the "T" as a sprite.
What we need to do is: mask out the background of the sprite, mask out the
portion of the bitmap where the "T" will be placed, and merge the two
The first step is to create a temporary Device Context compatible with the
destination picturebox's DC using the CreateCompatibleDC
function. CreateCompatibleDC creates a one
monochrome pixel by one monochrome pixel memory DC. Before using this DC
we must select the sprite into it with a call to SelectObject.
At this point, we have a copy of the sprite in memory (see picture 3). A
call to GetObject, passing the handle of the
sprite, writes the sprite's dimensions to a Bitmap
structure. This information is needed throughout.
To create the above mentioned masks, we need some temporary DCs to work
with. Four calls to CreateCompatibleDC are
made (picture 4 shows the output of this step). Before a DC can be used
we must select a bitmap into it meaning we must create four bitmaps. We
will need two monochrome and two color bitmaps. The monochrome bitmaps
are created with the CreateBitmap API passing in
the bitmap's dimensions, a 1 for the color depth and a 1 for the number of bits
to use to identify a color. In a monochrome bitmap, zeros represent the
foreground color and ones the background color.
The two color bitmaps are created by calling the CreateCompatibleBitmap
function passing in the desired dimensions and the handle to the DC for
the bitmap of my son. The result is two, one pixel by one pixel color
bitmaps. Using SelectObject, these bitmaps
are copied into the memory device contexts. Pictures 5 and 6 show the
Everything is now in place to begin the real work. The mapping mode, which
defines the unit of measure applied to the sprite, is set to that of the
destination picturebox via the GetMapMode and
SetMapMode functions. The blue background of the sprite is the
color we want to be transparent. Therefore, we need to set the background
of the sprite's DC to blue. This is accomplished via the
SetBkColor API specifying the DC to change and the color to change
We need to create two masks for the sprite using the monochrome bitmaps.
Recall, in a monochrome bitmap, ones represent the background color (blue) and
zeros the foreground color (i.e. the red "T"). In one mask, ones will
represent the "T" and in the other, the background. To create a mask
representing the background, the BitBlt (Bit-Block
Transfer) function is employed to copy the colored sprite to a monochrome
bitmap. Using the vbSrcCopy option instructs
BitBlt to do a straight copy of the color data from one device
context to another. To create the mask representing the "T", the first
mask is inverted. This is done by BitBlt-ing
the first mask to the second monochrome bitmap specifying the
vbNotSrcCopy option. See pictures 7 and 8.
Almost done! The original bitmap is BitBlt to
a color memory DC with the vbSrcCopy flag (picture
9). Next, its bits where the "T" is to be located are masked out by AND-ing
in the mask with the zeros where the "T" is (picture 10). The background
of the sprite is masked out using BitBlt and the
mask with the zeros for the background (picture 11).
We are now left with two DCs: a color one of the bitmap with the "T" masked out
and a color one of the sprite with only the "T". To produce the
final image, these two DCs are combined by OR-ing their data together
via a call to BitBlt with the vbSrcPaint
flag (picture 12). All that remains is to delete the memory device
contexts and clean up.
Download this project and copy the 2 bitmaps to the proper folder.
The images used by this program are expected to be in App.Path. That means
if you compile this program it should work fine. However, if you step
through the code, App.Path will point to the folder where VB is
installed. Copy the bitmaps to the correct folder before running.
Also, when stepping through the code, make sure that the form is no obscured by
any other windows in order for it to paint properly.