Wie kann ich die Deckkraft von Hintergrundbildern mit CSS-generierten Inhalten steuern?

Deckkraft von CSS-Hintergrundbildern mit generiertem Inhalt möglich

Im Gegensatz zur Anpassung der Deckkraft von Hintergrundfarben galt die Anpassung des Alphawerts von Hintergrundbildern bisher als Herausforderung. Allerdings bietet CSS Generated Content eine Lösung zum dynamischen Ändern der Deckkraft von Hintergrundbildern.

Um diese Technik zu implementieren, erstellen Sie ein Container-Div mit angegebener Position und Abmessungen und füllen Sie es mit den verbleibenden Inhaltselementen. Definieren Sie als Nächstes das Hintergrundbild innerhalb des für den Container erstellten Pseudoelements. Die Opazitätseigenschaft kann dann innerhalb des Pseudoelements manipuliert werden.

Eine Beispieldemonstration finden Sie unter http://jsfiddle.net/gaby/WktFm/508/. Unten finden Sie den erforderlichen Codeausschnitt:

HTML

<div>

CSS

.container {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

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

Während der Deckkraft generiert wird Inhalte können nicht direkt geändert werden, sie können jedoch dennoch dynamisch über CSS-Ereignisse und -Klassen gesteuert werden. Beispielsweise würde der folgende Code die Deckkraft beim Bewegen des Mauszeigers auf 1 anpassen:

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

Zusätzlich können CSS-Übergänge verwendet werden, um Deckkraftänderungen reibungslos zu animieren. Durch das Hinzufügen der folgenden Eigenschaften zur Regel .container:before wird die Deckkraft innerhalb von 1 Sekunde auf 1 geändert:

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

Es ist wichtig, die unterschiedliche Kompatibilität dieser Technik in verschiedenen Browsern zu beachten. Firefox 5 und höher unterstützen es, Internet Explorer 9 und niedriger jedoch nicht. Webkit-basierte Browser wie Chrome bieten je nach Version möglicherweise inkonsistente Unterstützung.

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