Wie mache ich ein Rechteck überlagernd transparent?

vor 7 Tagen

Melden

Was bedeutet "überlagernd transparent"?

Wenn zwei Rechtecke auf einer Webseite übereinander gelegt werden, kann es sinnvoll sein, dass

das obere Rechteck teilweise durchsichtig ist. Dadurch sieht man das darunterliegende Rechteck

durchscheinen. Diese Transparenz wird meist mit der CSS-Eigenschaft opacity oder

Anstatt die gesamte Opazität eines Elements zu reduzieren (was auch deren Inhalt transparent macht),

ist es oft besser, die Hintergrundfarbe mit einem Alpha-Wert zu versehen. Das bedeutet, dass nur

der Hintergrund transparent wird, während Text oder andere Inhalte ihre volle Deckkraft behalten.

Unten sehen Sie ein Beispiel mit zwei Rechtecken, die sich teilweise überlagern. Das obere Rechteck

hat eine halbtransparente rote Hintergrundfarbe, während das untere ein undurchsichtiges blaues Rechteck

Beide Rechtecke sind absolut positioniert innerhalb eines Containers mit relativer Positionierung.

Das erste Rechteck hat ein festes blaues Hintergrundfarb-RGB mit voller Deckkraft (Alpha = 1).

Das zweite Rechteck nutzt rgba(231, 76, 60, 0.6), also ein Rot mit 60% Deckkraft.

Die CSS Eigenschaft opacity kann auch verwendet werden, um ein Element transparent zu machen,

jedoch betrifft dies nicht nur den Hintergrund, sondern das gesamte Element inklusive Text, Bilder usw.

Für eine überlagernde Transparenz ist die Verwendung von rgba() empfohlen,

da damit nur der Hintergrund transparent wird und der Inhalt (Text, Bilder) erhalten bleibt.

Positionierung mit position: absolute und ein Container mit position: relative