Keith J. Grant
In CSS können Sie keinen Hintergrundverlauf überblenden. Er springt sofort von einem Verlauf zum anderen, ohne einen sanften Übergang dazwischen.
Er dokumentiert eine clevere Taktik, ein Pseudo-Element zu positionieren, das das Element mit einem anderen Hintergrund bedeckt, und die Deckkraft dieses Pseudo-Elements zu überblenden. Sie benötigen auch ein wenig z-index -Spielerei, um sicherzustellen, dass der darin enthaltene Inhalt sichtbar bleibt.
Ach, ich erinnere mich an eine Zeit, die noch gar nicht so lange her ist, da konnten Pseudo-Elemente nicht überblendet werden!
Ich dachte mir, da wir hier sowieso ein Pseudo-Element verwenden, würde ich auch ein paar andere Möglichkeiten dokumentieren. Wir könnten immer die Position eines längeren Elements verschieben, was wie ein Farbverlaufübergang aussehen würde. Oder wir könnten einen halbtransparenten Farbverlauf verwenden und einen soliden Hintergrund dahinter überblenden.