Transparency (graphic)

Transparency ( transparency ), in computer graphics image elements that can be located underneath the content elements wholly or partially visible.

The contrasting concepts of transparency and opacity (opacity ) here describe the identical property; added nor the semi- transparent mentioned gradations.


With the combination of multiple graphics in a file could be used initially only fully opaque elements. Two layers one above the other elements, the element located at the bottom was completely covered. Challenging, however, is the realization of the translucent members. Here, a transparency or opacity for each element (derived from physical concepts opaque ( opaque ) and transparent, translucent, translucent ') indicate, that the measure of how strong the underlying at a lower level content to be covered.

Appropriate native transparencies were previously stored in only a few image file formats. For most other formats a flattening before the issue had to be carried out, in which the transparent elements based on the preset opacity values ​​are " flattened " onto a plane. Here, however, existing vector elements are rasterized policy.

More modern vector ( such as SVG, EPS and EMF) and raster graphics formats ( such as PNG ) also allow the definition of picture elements as completely transparent or store next to the color information (R- G -B) also has an alpha channel. In the meantime, can be specified for any number of superimposed elements as often as the measure of transparency.

When the screen display as well as for printing all transparency information need for each picture element (pixel ) are summed up (as well as the color information ).

Two-dimensional realizations

Transparency mask

The simplest and oldest method is the storage as a separate transparency mask, first for raster graphics (bitmaps).

The mask is a rectangular matrix containing just one bit for each pixel. The image generation then follows for each image position with the following rule:

  • If Transparenzbit set then take information of the background image
  • Use the foreground image.

The first important application occurred in connection with cursors on ( cursor). Software and graphics hardware can only process rectangular areas, so the smallest rectangle that encloses the figure of the cursor (such as an arrow or a hand with index finger). If the cursor is now on the screen surface (desktop) moved to be reckoned as quickly as possible. For this purpose, the rectangle is cached with an undisturbed background, then combines the cursor image using a transparency mask with the background and displayed. The cursor moves on, the cached undisturbed background image is restored and the procedure is repeated for the new cursor position. This process was soon incorporated in whole or in part in the hardware of graphics cards so that the actual computer ( CPU) itself was thus no longer loaded.

Since Windows 3, the technique of transparency mask was also available for the Microsoft icons. In the. ICO file both the ( opaque ) image in the DIB / BMP format as well as a matrix with the transparency mask is stored, so that the image could be combined with the desktop. Also TIFF allows the definition of transparency masks for the combination of individual images in this container format.

In addition to the older bitmap transparency mask, the same technique is also applicable to surfaces in ( scalable ) Illustrations; here the separate mask object logically coherent image objects ( primitives, Layer, Group) is linked. The resulting effects are a look through a keyhole or a cutting (clipping ) of the foreground image. This also applies to combination of the whole picture in mixing and container formats ( metafile ), such as PDF or in text processing by means of Open Document and Microsoft Word.

The assignment, if the value "0 " transparent and "1" is intended to mean opaque or vice versa, is not uniform in the various graphic formats and can occasionally lead to conversions that black rectangles appear or image layers are apparently gone.

If it is sometimes claimed by software or even hardware that they could handle any non - rectangular regions and then is internally based on a transparency mask.

Transparent color image

The first inclusion directly in the image was made by an assignment, after the one of the image color to be considered transparent.

Thus, one of the 16 VGA colors or one of the 256 colors palette was no longer available.

The most well -known use for this method was introduced to GIF89a in the Graphics Interchange Format in the transition from GIF87a. PNG made ​​by this later, but expanded it alternatively to the alpha channel.

This technique was used in the 1990s; they did not require any additional resources to storage and transmission capacity, and came forward to the opportunities of the information available hardware. The files are even smaller than when using the separate transparency mask.

Semi- transparency

To obtain semi-transparent image overlay and a greater flexibility and creative possibility of " fully opaque " graduated transparency values ​​were in addition to the two extreme values ​​" fully transparent" and introduced.

Here, the ratio values ​​of transparency and opacity are always adding to 1 - for example, found 30 % transparency an opacity of 70%. The transparency value then indicates what proportion will feed information to the background image, the remaining weight comes to the foreground image.

Here is the most important expression of the so-called " alpha value " with which the three RGB color values ​​(red, green, blue) were extended to include a fourth code. This combination of four bytes is usually referred to as RGB / A or aRGB, see alpha channel. The color value can then the picture elements - both individual pixels as well ( scalable ) objects of Vector - are assigned.

The "Alpha - byte" allows 256 different gradations, where " 0" for " fully transparent" and " 255" for " fully opaque " (ie opaque); strictly speaking it is a opacity value.

Advantageously, the alpha value is the fact that the color of the pixel does not change but only its brightness. This allows for much simpler and faster computations and simplifies the specification by the human artist.

In addition to this binding to an RGB color value of the alpha value (alone) can also be assigned to an entire image plane or an entire inserted image. This image planes can be logically turned on and off:

  • If an image plane switched to " fully transparent", it is apparently disappeared;
  • It is set to " fully opaque ", the result of whose pixels depends on: If it is RGB values ​​, then only this element is visible in the foreground; there are RGB / A, the transparency depends on this.

Also, a semi-transparent image plane is possible: If the picture elements defined as RGB, so each element is some commonality extends to RGB / A; they are already RGB / A, then both transparency values ​​are multiplied together.

Finally, a transparency mask instead of the simple can be visible / invisible also contain alpha values ​​.

More than two image planes

There is always the combination of the two foremost image planes considered. The respective background image can even be created as an overlay picture of two image planes. Through a recursive process - starting with the bottom two images - Any number of image planes are combined.

Superposition of color images,

The transparent overlay of color images is tricky, especially when the image planes are moved towards each other.

Usually the color mixing is ( ie the ratio of R, G and B to each other) taken from the foreground image. The image plane behind it only provide gray values ​​that affect the brightness of the foreground color. The transparency value in this case indicates how strong this influence should be. This method is often used when referring to a desktop object ( represented by icon or thumbnail ) should be moved with drag and drop. The contours of the background shine through the moving object through it and allow it to target the desired destination safely.

Alternatively, in this situation, the moving object in the foreground is represented as gray -scale image and the color mixture is taken from the back image planes. The transparency value is included in the calculation of the brightness.

However, if the values ​​of the color channels R, G and B separately from one another simply arithmetically calculated at moving against each other image planes, there is a psychedelic color noise and completely unexpected and unpredictable colors of the picture.

For static superimposed image layers, there are different formulas to account for both color values ​​and to calculate a resultant overall color by controlling the additive or subtractive color mixing. The RGB model is unsuitable here and it will be changed regularly to HSB representation; saturation S ( Saturation ) as well as the brightness B (Brightness ) correlate with the opacity value. Whether this particular case leads to a satisfactory visual appearance must be judged by the human observer. It would correspond to the view of the world by a color slide through; the expectation that this figure must be defined.

Single Image

The transparency value has sense only when multiple image layers are superimposed. If there is only a single image plane, the value in the rule is ignored. Alternatively, it is sometimes used to assign the image to a " pallor "; with full transparency, it would not be visible - a rarely meaningful interpretation.


All of the above explanations refer to 2 -D images, that is, image films are directly superimposed.

In 3D computer graphics objects can have translucent material properties. In volume graphics are made objects of voxels, each of which has a certain opacity; the representation ( image synthesis, rendering) of such objects, there are several possibilities. For other types of modeling, the material properties are applied uniformly for the entire object. The volume scattering is here often modeled by a phase function with absorption and scattering coefficients. The Beer-Lambert law is applicable here: incoming light rays are exponentially attenuated by the medium. The volume scattering can be rendered using Monte Carlo ray tracing or photon mapping.

References and Notes

  • DTP software
  • Graphic Design