Warum kann ich einen linearen CSS-Verlauf nicht direkt übergehen?

CSS-Übergang mit linearem Farbverlauf

Frage

Wenn Sie versuchen, einen Übergang auf einer Schaltfläche mit einem linearen CSS-Farbverlauf als Hintergrund zu implementieren, werden Sie kann auf Schwierigkeiten stoßen. Trotz Ihrer Bemühungen gelingt der Übergang nicht. Sie erkundigen sich nach möglichen Fehlern in Ihrem Code und suchen nach Lösungen.

Antworten

Bedauerlicherweise werden direkte Übergänge von Farbverläufen in CSS derzeit nicht unterstützt.

Um diese Einschränkung zu überwinden, a Eine praktische Alternative besteht darin, ein zusätzliches Element einzuführen, um den gewünschten Farbverlauf zu rendern und Deckkraftübergänge darauf anzuwenden:

<code class="css">a.button {
  position: relative;
  z-index: 9;
  /* ... Additional style properties ... */
  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  z-index: -1;
  /* ... Additional style properties ... */
  background: linear-gradient(top, lime, #89af37);
  opacity: 0;
  transition: opacity 1s linear;
}

a.button:hover .button-helper {
  opacity: 1;
}</code>

HTML:

<code class="html"><a href="#" class="button">
  <span class="button-helper"></span>
  button
</a></code>

Bei diesem Ansatz sorgt das .button-helper-Element dafür den Farbverlauf und geht sanft in die Deckkraft über, um den gewünschten Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonWarum kann ich einen linearen CSS-Verlauf nicht direkt übergehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!