Wie kann ich die Deckkraft von Hintergrundbildern mithilfe von CSS anpassen?

Anpassen der Deckkraft des Hintergrundbilds mithilfe von CSS-generierten Inhalten

Die CSS-Eigenschaft „Hintergrundbild-Opazität“ ermöglicht Ihnen, wie der Name schon sagt, Änderungen die Transparenz von Hintergrundbildern. Es ist jedoch wichtig zu beachten, dass eine solche Eigenschaft in CSS nicht vorhanden ist.

Verwendung von CSS-generierten Inhalten und Klassen

Ein alternativer Ansatz besteht darin, CSS-generierte Inhalte zu verwenden Erstellen Sie einen verblassten Hintergrund:

<div class="container">
  contents
</div>

.container {
  position: relative;
  z-index: 1;
  overflow: hidden; /* Consider cropping the image */
}

.container:before {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  content: url('path/to/image.ext');
  opacity: 0.4;
}

.container:hover:before {
  opacity: 1;
}

Mit dieser Technik können Sie zwar ein verblasstes Hintergrundbild anzeigen, dies ist jedoch nicht möglich die dynamische Anpassung seiner Deckkraft.

CSS-Übergänge verwenden

Um die Deckkraft des Hintergrundbilds zu animieren, können Sie CSS-Übergänge verwenden:

.container:before {
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

Diese Ergänzung zur .container:before-Regel führt dazu, dass die Deckkraft über eine Dauer von eins auf 1 übergeht Zweitens.

Browserkompatibilität

• Firefox 5 und höher (möglicherweise auch Firefox 4)
• IE 9 ( Schlägt fehl )
• Webkit-basierte Browser (Chrome 26 und oben)

Es ist erwähnenswert, dass dieser Ansatz derzeit nur von der neuesten Version von Firefox unterstützt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich die Deckkraft von Hintergrundbildern mithilfe von CSS anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!