Wie erreicht man Deckkraftverläufe in CSS?

Deckkraftverläufe in CSS implementieren

Viele haben versucht, einen bestimmten visuellen Effekt zu reproduzieren, der eine Überlagerung auf einer dynamischen Hintergrundfarbe beinhaltet die Lösung eines CSS-Deckkraftgradienten. Die bereitgestellten Beispiele in der Frage veranschaulichen zwar Versuche dieser Implementierung, sie greifen jedoch aufgrund der Codekomplexität oder Browsereinschränkungen zu kurz.

Glücklicherweise haben Fortschritte bei Browsern es möglich gemacht, Deckkraftgradienten vollständig innerhalb von CSS mithilfe von mask-image-Eigenschaft. Diese Eigenschaft wird derzeit von Chrome, Safari, Opera und allen Browsern außer Internet Explorer unterstützt und bietet eine effizientere und browserübergreifende kompatible Lösung.

CSS-Implementierung:

<code class="css">p {
    color: red;
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}</code>

Der Trick besteht darin, einen Farbverlauf als Maske selbst zu verwenden, wobei der Farbverlauf (über Alpha-Werte) in Transparenz übergeht. Dies ermöglicht die Erstellung eines Overlay-Effekts, der sich dynamisch an die Hintergrundfarbe anpasst.

Beispiel mit einfarbigem Hintergrund:

[Demo-Link]

Zusätzliche Hinweise:

Alle Bildeigenschaften für
• mask-image werden unterstützt.
CSS-Maskierung ist nur für Textelemente und verfügbar verhält sich bei Bildern möglicherweise nicht wie erwartet.

Das obige ist der detaillierte Inhalt vonWie erreicht man Deckkraftverläufe in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!