Transparent baggrund

Box 1

Her er et eksempel med en boks der har en 70% transparent PNG baggrund. Indholdet i denne boks er ikke transparent. Denne simple standard metode virker i Opera, Safari (Mac), Konqueror (Linux), Mozilla (Firefox, Netscape)

CSS-kode

#box1 {
  background-image: url(bg.png);
}

Box 2

IE har ikke fuld alpha-transparent på PNG-billeder, så vi skal bruge filteret AlphaImageLoader for at loade PNG-billedet. Filteret virker i Internet Explorer 5.5 eller senere.

Den ekstra CSS-kode er kun til IE, så vi skal bruge * html-hacket. Alternativt kan den ekstra CSS-kode også lægges i et seperat IE only-stylesheet ved hjælp af Conditional Comments.

CSS-kode

#box2 {
  background-image: url(bg.png);
}
* html #box2 {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',sizingMethod='scale');
}

Box 3

På grund af en bug i IE, virker links i box 2 ikke. For at fikse det bliver vi nød til at lave et ekstra wrapper element som er relativt positioneret.

CSS-kode

#box3 {
  background-image: url(bg.png);
}
* html #box3 {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',sizingMethod='scale');
}
* html #box3wrapper {
  position:relative;
}