CSS-Tricks: RGBA und die Durchsichtigkeit in CSS3

CSS3 und die „Durchsichtigkeit“: 3 Beispiele mit RGBA

CSS3 - RGBA und Durchsichtigkeit

Grafiken und farbige Ebenen übereinander zu lagern und die untere durch die obere durchscheinen zu lassen und dies schnell, unkompliziert ohne Hilfe von Bildbearbeitungsprogrammen und ressourcensparend durchzuführen. Welcher Webdesigner wünscht sich das nicht? Dies alles und noch viel mehr ist mit CSS3 möglich.

Ich möchte Ihnen heute zeigen, wie Sie mit der CSS3-Eigenschaft RGBA ganz einfach eine „Durchsichtigkeit“ von Ebenen herzaubern können. Bei RGBA handelt es sich um den RGB-Farbraum (Rot Grün Blau) mit einer zusätzlichen Information (Alpha, Wert der Durchsichtigkeit). Dieser Alpha-Wert drückt in Werten von 0.0 bis 1 die Transparenz aus. 0.0 = völlige Transparenz, 1 = keine Transparenz!

In Gegensatz zur CSS3-Eigenschaft opacity, welche als Kind-Element vererbt wird, gibt es dieses Problem mit der Vererbung bei RGBA nicht.

RGBA und seine Durchsichtigkeit/Deckkraft

Um das Ganze für Sie richtig verständlich zu beschreiben, liefere ich Ihnen hier, ohne größere Theorie, 3 interessante Beispiele zu diesem Thema. In allen 3 Muster-Beispielen ist ein Foto mittels einer URL eingebunden und als Hintergrundgrafik festgelegt. Über diese lege ich dann verschiedene Farben bzw. einen Text, um Ihnen die Wirkungsweise von RGBA-Überlagerungen zu zeigen.

#1 – Hintergrundbild – Überlagerung mit schwarzer Farbe

Beispiel 1
Beispiel herunterladen

HTML

CSS

.module {
  margin: 10px;
  width: 200px;
  height: 150px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
  background-size: cover;
}
.darken {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
}

#2 – Hintergrundbild – Überlagerung mit 4 verschiedenen Farben

Beispiel 2
Beispiel herunterladen

HTML


CSS

.module {
  margin: 10px;
  width: 200px;
  height: 150px;
  float: left;
  background-size: cover;
}
.red {
  background-image: 
    linear-gradient(
      rgba(255, 0, 0, 0.5),
      rgba(255, 0, 0, 0.5)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
}
.red {
  background-image: 
    linear-gradient(
      rgba(255, 0, 0, 0.5),
      rgba(255, 0, 0, 0.5)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
}
.yellow {
  background-image: 
    linear-gradient(
      rgba(255, 215, 15, 0.5),
      rgba(255, 215, 15, 0.5)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
}
.blue {
  background-image: 
    linear-gradient(
      rgba(0, 15, 200, 0.5),
      rgba(0, 15, 200, 0.5)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
}
.green {
  background-image: 
    linear-gradient(
      rgba(0, 215, 15, 0.5),
      rgba(0, 215, 15, 0.5)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
}

#3 – Text-in-a-box / Text in einem Foto

Dieses Beispiel ist ein wenig anders aufgebaut. Hier wird gezeigt, wie Sie eine transparente Beschriftung über das Hintergrundbild legen können. Durch die individuelle Einstellung der Überlagerung können Sie die Lesbarkeit des Textes sehr gut variieren!

Beispiel 3
Beispiel herunterladen

HTML

Title here

Running Shoes and Water

CSS

.module {
  margin: 10px;
  width: 230px;
  height: 150px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
  background-size: cover;
  position: relative;
}

h2 {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.75);
  padding: 4px 8px;
  color: white;
  margin: 0;
  font: 14px Sans-Serif;
}

.opp h2 {
  background: rgba(255, 255, 255, 0.75);
  color: black;
}

Quelle: CSS-Tricks.com

Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *