Anleitung: Eine Box halbtransparent machen

Wenn Sie möchten, dass die Box und ihr gesamter Inhalt die Deckkraft ändern, ist die CSS-Eigenschaft opacity das Werkzeug der Wahl. Deckkraft ist das Gegenteil von Transparenz; daher ist opacity: 1 vollständig undurchsichtig – Sie können die Box überhaupt nicht durchsehen.

Ein Wert von 0 würde die Box komplett transparent machen, und Werte dazwischen ändern die Deckkraft, wobei höhere Werte weniger Transparenz bedeuten.

In vielen Fällen möchten Sie nur, dass die Hintergrundfarbe selbst teilweise transparent ist, wobei der Text und andere Elemente vollständig undurchsichtig bleiben. Um dies zu erreichen, verwenden Sie einen <color> Wert, der einen Alphakanal enthält, wie zum Beispiel rgb(). Wie bei opacity macht ein Wert von 1 für den Alphakanal die Farbe vollständig undurchsichtig. Daher setzt background-color: rgb(0 0 0 / 50%); die Hintergrundfarbe auf eine Deckkraft von 50%.

Versuchen Sie, die Werte für Deckkraft und Alphakanal in den untenstehenden Beispielen zu ändern, um mehr oder weniger des Hintergrundbildes hinter der Box zu sehen.

<div class="wrapper">
  <div class="box box1">This box uses opacity</div>
  <div class="box box2">
    This box has a background color with an alpha channel
  </div>
</div>

body {
  font-family: sans-serif;
}

.wrapper {
  height: 200px;
  display: flex;
  gap: 20px;
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloon.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px;
}

.box {
  flex: 1;
  border: 5px solid #000;
  border-radius: 0.5em;
  font-size: 140%;
  padding: 20px;
}

.box1 {
  background-color: #000;
  color: #fff;
  opacity: 0.5;
}

.box2 {
  background-color: rgb(0 0 0 / 0.5);
  color: #fff;
}

• Farben auf HTML-Elemente mit CSS anwenden.