Etliche Webdesigner werden wohl schon vor dem Problem gestanden haben, einem Hintergrundbild eine Transparenz zu geben, ohne dass das gesamte Element davon betroffen ist. Mit einem kleinen Trick und ohne zusätzlichem Markup funktioniert das auch.

Mit CSS3 sind ja bereits Möglichkeiten vorhanden, um einem farbigen Hintergrund mittels rgba() oder hsla() einen Alphawert mitzugeben. Leider aber fehlt eine solche Angabe für Hintergrundbilder komplett. Die Eigenschaft opacity ist in aller Regel keine Option, denn sie verpasst gleich dem gesamten Element einen Alphawert. Was also tun?

background-opacity mittels :before

So ganz falsch ist opacity trotzdem nicht, wenn man das Hintergrundbild nicht für das Element definiert, sondern für Generated Content:

.myElement {
  position:relative;
  z-index:1;
  overflow:hidden;
}

.myElement:before {
  content:url(path/to/my/image.jpg);
  position:absolute;
  z-index:0;
  top:0;
  right:0;
  bottom:0;
  left:0;
  opacity:.7;
}

Im Prinzip sind nur 2 Dinge wichtig. Zum Ersten, das :before einen niedrigeren z-index als das Element hat. Und zum Zweiten, dass opacity im CSS Generated Content definiert wird.

Das Schöne ist, dass damit sogar eine Animation des opacity-Wertes möglich ist.