Heim >Web-Frontend >CSS-Tutorial >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
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!