Wie erstelle ich in CSS einen dynamischen Deckkraftverlauf für Textüberlagerungen?

Erstellen eines Deckkraftverlaufs in CSS

Trotz einer dynamischen Hintergrundfarbe besteht das Ziel darin, einen Effekt zu erzeugen, der den Text teilweise verdeckt und gleichzeitig respektiert der Hintergrund. Während ein weißes Overlay für statische Hintergründe funktioniert, ist für dynamische Hintergründe ein CSS-Deckkraftverlauf erforderlich.

Verwendung von CSS-Maskenbildern

Moderne Browser (Chrome, Safari, Opera) Unterstützung der Verwendung von CSS-Maskenbildern, um den gewünschten Effekt zu erzielen. Der Schlüssel besteht darin, eine Maske zu definieren, die einen Farbverlauf enthält, der in Transparenz übergeht:

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

Wobei rgba(0,0,0,1) für volle Deckkraft steht und rgba(0,0,0,0 ) steht für vollständige Transparenz.

Demo und Kompatibilität

Sehen Sie sich eine Demo an, um die Wirkung in Aktion zu beobachten.

Beachten Sie das Diese Technik basiert auf der mask-image-Eigenschaft, die in älteren Browsern nur begrenzt unterstützt wird. Insbesondere Firefox unterstützt derzeit stattdessen SVG-Masken.

Weitere Informationen und Details zur Browserkompatibilität finden Sie bei Caniuse: https://caniuse.com/?search=mask-image

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS einen dynamischen Deckkraftverlauf für Textüberlagerungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!