Wie ändere ich die Farbe des Fortschrittsbalkens im HTML5-Fortschrittstag? Detaillierte Erläuterung des Fortschrittsbalkens-HTML-Tutorial-php.cn

Wie ändere ich die Farbe des Fortschrittsbalkens im HTML5-Fortschrittstag? Detaillierte Erläuterung des Fortschrittsbalkens

寻∝梦

Freigeben： 2018-09-04 10:39:38

Original

16383 Leute haben es durchsucht

In diesem Artikel wird die Stilanalyse des neuen Fortschrittsbalken-Tags in HTML5 vorgestellt und erläutert, wie die Farbe des Fortschrittsbalkens über das HTML5-Fortschritts-Tag geändert wird. Lassen Sie uns als nächstes gemeinsam diesen Artikel lesen

Lassen Sie uns zunächst die Einführung des HTML5-Fortschritts-Tags kennenlernen:

Fortschritt ist ein neues Element von HTML5. Gibt die Definition eines Fortschrittsbalkens an, der vielfältig einsetzbar ist. Er kann zur Anzeige des Fortschritts beim Hochladen von Dateien und beim Herunterladen von Dateien verwendet werden und kann auch als Ladestatusbalken zum Laden verwendet werden.

Tipp: Bitte verwenden Sie das Tag zusammen mit JavaScript, um den Fortschritt der Aufgabe anzuzeigen.

Hinweis: Das Tag eignet sich nicht zur Darstellung von Metriken (z. B. Speicherplatznutzung oder Abfrageergebnisse). Verwenden Sie stattdessen das Tag , um Gewichte und Maße darzustellen.

Syntax des HTML5-Fortschrittsbalkens:

<progress value=&#39;70&#39; max=&#39;100&#39;></progress>

Nach dem Login kopieren

Bereiten wir ein Beispiel für ein HTML5-Fortschritts-Tag vor:

<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
progress{
        width: 168px;
    height: 5px;
}
progress::-webkit-progress-bar
{
       background-color:#d7d7d7;
}
progress::-webkit-progress-value
{
     background-color:orange;
}
</style>
</head>
<body>
<progress value="100" max="100" class="hot">
</body>
</html>

Nach dem Login kopieren

Erklären Sie es. Im Chrome-Browser wird der Fortschritt mit der folgenden Struktur gerendert:

progress

:-webkit-progress-bar All progress

:-webkit-progress-value Completed Progress

Stylen Sie es mit diesen beiden Pseudoelementen.

In anderen Browsern wie IE10 ist das jedoch anders. Diese beiden Pseudoelemente funktionieren nicht. Sie können den Farbstil direkt verwenden, um die Farbe des abgeschlossenen Fortschritts zu ändern, und der gesamte Fortschritt ist im Hintergrund 🎜>

In Firefox stellt der Fortschrittsbalken den abgeschlossenen Fortschritt dar und der Hintergrund stellt den gesamten Fortschritt dar. In Opera kann dieser Stil jedoch nur der Standardstil des Browsers sein.

Daher kann die Kompatibilitätsschreibmethode wie folgt betrachtet werden:

progress
{
   color:orange; /*兼容IE10的已完成进度背景*/
   border:none;
   background:#d7d7d7;/*这个属性也可当作Chrome的已完成进度背景，只不过被下面的::progress-bar覆盖了*/      
}
progress::-webkit-progress-bar
{
   background:#d7d7d7;
}
progress::-webkit-progress-value,
progress::-moz-progress-bar
{
     background:orange;
}

Nach dem Login kopieren

Das Obige ist der Code für den Farb-CSS-Stil des Fortschrittsbalkens wie folgt:

Wie ändere ich die Farbe des Fortschrittsbalkens im HTML5-Fortschrittstag? Detaillierte Erläuterung des Fortschrittsbalkens

Okay, oben ist ein Artikel darüber, wie man das neue Fortschritts-Tag in HTML5 verwendet und die Farbe ändert. Wenn Sie Fragen haben, können Sie diese unten stellen .

[Empfehlung der Redaktion]

Wie verwende ich den HTML5-Header-Tag? Einführung in die Rolle von HTML5-Header-Tags

Was ist das Include-Tag in HTML? html include implementiert die Konfigurationsanalyse

Das obige ist der detaillierte Inhalt vonWie ändere ich die Farbe des Fortschrittsbalkens im HTML5-Fortschrittstag? Detaillierte Erläuterung des Fortschrittsbalkens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!