Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Chroma

Use the chroma filter to make a specific colour transparent. You would normally use this filter on a picture; the effect is similar to having a transparent GIF file. To use the chroma filter, you simply specify the colour in RGB format. For example:

{filter: Chroma(color=#0000FF)}

The colour should be one of the colours in the picture.

If you use this filter on pictures that are not rectangular, any other filters, such as shadow, work with the irregular shape.

There are a few of things to be aware of:

  • Don't use this filter for files dithered from 24 bit to 8 bit
  • JPEG files which are dithered and compressed do not produce an entirely solid chromakey colour and so give uneven effects
  • This filter does not work well with anti-aliasing (sharp lines smoothed by blending colours of surrounding pixels)

If you want to see a working example, you can look at the Filter Effects page. This HTML page shows the effects of all the visual filters. For each filter, there is an example. Underneath the example, there is a box for each parameter. You can change the values for the parameter and click on the Change button to see the effect. The Reset button restores the example to the initial state.