CSS - CSS3 Deckkraftgradient
CSS ermöglicht seinen Benutzern, verschiedene Auswirkungen auf den Inhalt in HTML anzuwenden. Ein solcher Gradient ist der Depazitätsgradient, der normalerweise aus einer Farbe besteht, die in eine andere verblasst. Bei CSS haben Benutzer jedoch die vollständige Kontrolle über den Übergang, von der Farbe bis zur Ausrichtung. Der "linear-Gradient ()Ist der beliebteste und praktischste Gradiententyp.
Diese Beschreibung wird demonstrieren:
- Was ist Depazitätsgradient?
- So setzen Sie CSS3 Deckkraftgradienten?
Was ist Depazitätsgradient?
Gradienten sind das CSS -Element in Form des Bilddatentyps, der eine modifizierte Farbe in zwei oder mehr Farbtönen darstellt. Diese Modifikationen werden entweder als radiale oder lineare Übergänge dargestellt. Gefälle können überall verwendet werden, wo ein Bild darin bestehen könnte. Gradienten werden am häufigsten als Hintergrund für Elemente verwendet.
So setzen Sie CSS3 Deckkraftgradienten?
Probieren Sie die folgenden Anweisungen aus, um den Gradienten der Opazität in CSS festzulegen.
Schritt 1: DIV -Container erstellen
Erstellen Sie zunächst einen DIV -Behälter mit Hilfe des “Element und fügen Sie eine "hinzu"Ausweis”Attribut mit einem bestimmten Namen.
Schritt 2: Daten in den Absatz hinzufügen
Als nächstes verwenden Sie die “ LinuxHint ist eine der besten Tutorial -Websites in Großbritannien. Es bietet den besten Inhalt in mehreren Kategorien, einschließlich HTML/CSS, Docker, Github, Windows, JavaScript, PowerShell und vielem mehr. Ausgang Schritt 3: Style den Div -Behälter Greifen Sie auf den Div -Container zu, indem Sie den Klassennamen mit dem Klassenauswahl als “verwenden#Hauptinhalt”: Wenden Sie dann die unten aufgeführten CSS -Eigenschaften an: Schritt 4: Stilabsatz Stylen Sie nun den Absatz, indem Sie mit dem Klassennamen darauf zugreifen “.Absatz 1”: Hier: Schritt 5: Setzen Sie "Linear Gradient" auf Absatz Verwenden Sie die “.Absatz 1"Um auf die Klasse": After "zugreifen zu können: Nach dem angegebenen Code -Snippet: Ausgang Es ist zu bemerken, dass der CSS -Depazitätsgradient erfolgreich angewendet wurde. Abschluss Um den Depazitätsgradienten festzulegen, fügen Sie zunächst Text in den Absatz mit der "" den "Text" hinzu" Schild. Greifen Sie dann auf den Absatz zu und wenden Sie die “anHintergrund”CSS -Eigenschaft und legen Sie den Wert dieser Eigenschaft als" fest "linearer Gradient”. Es erzeugt einen Hintergrund, der aus einem fortschreitenden Übergang zwischen zwei oder mehr Farben entlang einer geraden Linie besteht. Diese Beschreibung hat den CSS-Depazitätsgradienten erklärt. #Hauptinhalt
Hintergrundfarbe: LightGreen;
Rand: 20px 80px;
Grenze: 3px gepunktet blau;
.Absatz 1
Farbe blau;
Überlauf versteckt;
Position: Relativ;
Mix-Blend-Mode: hartes Licht;
Schriftgröße: 30px;
.Absatz 1: Nach
Position: absolut;
Oben: 0px;
Hintergrund: linearer Gradient (transparent, grau);
links: 0px;
Inhalt: "";
Breite: 100%;
Höhe: 100%;
Zeiger-Events: Keine;