Wie kann ich HTML und CSS verwenden, um mit transparenten Teilern im Gradientenhintergrund den Fortschrittsbalkeneffekt zu erzielen?

Erstellen Sie einen coolen Gradienten -Fortschrittsbalken: Die perfekte Kombination von HTML und CSS

Viele Entwickler verfolgen attraktivere UI -Elemente wie Fortschrittsbalken mit Gradienten und transparenten Trennwänden. In diesem Artikel wird detailliert erläutert, wie HTML- und CSS-Code verwendet wird, um die im Bild gezeigte Gradienten-Fortschrittsleiste zu implementieren und auffällige transparente Teiler zu enthalten.

Der Schlüssel zu diesem Effekt besteht darin, lineare Gradientenhintergrund- und mask-image Attribute geschickt zu verwenden. Erstens benötigen wir einen Container, der die Fortschrittsleiste enthält, und ein internes Element, das den Gradienteneffekt anzeigt. zwei<div> Elemente können implementiert werden: Außenbehälter und innerer Gradientenbalken.<p> Die HTML -Struktur lautet wie folgt:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div class=&quot;bar&quot;&gt; &lt;div class=&quot;pattern&quot;&gt;&lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p><code>bar definiert den Gesamtstil der Fortschrittsleiste wie Breite und Hintergrundfarbe. pattern Musterklasse ist für die Präsentation von Gradienten und transparenten Trennungseffekten verantwortlich.

Der CSS -Stil lautet wie folgt:

 .Bar {
  Polsterung: 0,5EM;
  Breite: 19EM;
  Hintergrundfarbe: #000; /* Container Hintergrundfarbe, anpassbar*/
}

.Bar .pattern {
  Höhe: 2em; /* Fortschrittsbalkenhöhe, anpassbar*/
  Hintergrund: Linear-Gradient (nach rechts, #909 0%, #009 100%) #000; /* Gradienten Hintergrundfarbe, anpassbar*/
  Maskenbild: Wiederholung linear Gradient (nach rechts, #000 0, #000 1EM, transparent 1em, transparent 1,5em); /* Erstellen Sie transparente Teiler mit wiederholten linearen Gradienten*/
}

In diesem CSS-Code erstellt linear-gradient einen linearen Gradienten von hellgrün bis dunkelgrün. mask-image -Eigenschaft verwendet repeating-linear-gradient , um einen sich wiederholenden linearen Gradienten als Maske zu erstellen, wodurch transparente und undurchsichtige Bereiche definiert werden, wodurch transparente Teiler auf dem Gradientenhintergrund erzeugt werden. #000 0, #000 1em, transparent 1em, transparent 1.5em Abschnitt Definiert den Wiederholungsmodus der Maske, #000 bedeutet undurchsichtig und transparent bedeutet Transparenz. Durch Einstellen des Werts können die Breite und der Abstand des Teilers gesteuert werden. Beachten Sie, dass mask-image Browserkompatibilitätsprobleme aufweist und möglicherweise zusätzliche Browser-Präfixe wie -webkit-mask-image hinzufügen muss.

Durch die obige HTML -Struktur und den CSS -Stil kann ein Fortschrittsbalken mit Gradientenhintergrund und transparenter Teiler erreicht werden. Sie können die Farben, die Breite, die Höhe und die Trennstile nach Bedarf ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich HTML und CSS verwenden, um mit transparenten Teilern im Gradientenhintergrund den Fortschrittsbalkeneffekt zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!