semitransparentes png als Hintergrund für Menü (superfish)

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Aus Performancegründen wäre es besser, nur eine Grafik zu verwenden (CSS-Sprites).

Nein! Aus Performancegründen wäre es besser, gar keine Grafik zu verwenden.

Ist für einen einfarbigen transparenten Hintergrund in modernen Browser ja überhaupt nicht nötig, dafür gibt es Farbangaben mit rgba(). [CSS3-COLOR §4.2.2]

Für ältere Browser entweder keinen transparenten, sondern opaken Hintergrund

li  
{  
  background: #F00;  
  background: rgba(255, 0, 0, 0.8);  
}  
  
li:hover  
{  
  background: #666;  
  background: rgba(102, 102, 102, 0.8);  
}

oder eine Grafik als Fallback:

li  
{  
  background: url(myBackground.png) 0 0;  
  background: rgba(255, 0, 0, 0.8);  
}  
  
li:hover  
{  
  background: url(myBackground.png) 0 42px;  
  background: rgba(102, 102, 102, 0.8);  
}

(Wobei das mit der Höhe der Hintergrundfrafik problematisch ist. Was, wenn ein Menüpunkt mehrzeilig ist?)

Qapla'