CSS-Gradientenstatistik-Säulendiagramm_Erfahrungsaustausch

Verwenden Sie das Zeichenwerkzeug, um eine Verlaufslänge zu erstellen. Es sieht besser aus (Breite: 187 Pixel; Höhe 15 Pixel).
Die ursprüngliche Idee ist, dass das Bild bei 12 % von links zur 12 %-Position angezeigt wird. und die restlichen 88 % werden nicht angezeigt, aber sie belegen keinen Bereich (es sieht nicht anders aus als der untere Rand des 1-Pixel-Bildes. Ich habe am Nachmittag danach gesucht und festgestellt, dass es unmöglich ist, keinen Bereich zu belegen). .
Um den verbleibenden Prozentsatz des Bildes auszublenden, habe ich zunächst ein Bild für hell und dunkel verwendet, wobei jedes die Hälfte der Gesamthöhe des Bildes ausmacht:

sukzessive von 10% auf 100%, wenn der Effekt nicht sichtbar ist, wechseln Sie zu < span> Das ist in Ordnung, aber es muss Inhalt in der Box sein.
Ich habe es gestern Abend nicht aufgeschrieben und konnte keinen Farbverlauf vom Typ 4 finden Ich habe mich von einem der Beispiele inspirieren lassen.
URL: http://apples-to-oranges.com/blog/post /css-for-bar-graphs/?id=55
in: Komplexes CSS-Balkendiagramm
Das habe ich sofort verstanden:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Unbenanntes Dokument</title> <style type="text/css"> dl{margin:0;padding:0;width:187px;} dd{position:relative;display:block;float:left;width:187px;height:15px; margin:0;border:1px solid #eee;} * html dd{ float: none; } dd div{position:relative;background:url("../image/default/Percent.gif");height:15px;width:100%;text-align:right;} </style> <dl> <dd> <div style="width:5%;"></div> </dd> </dl> <dl> <dd> <div style="width:15%;"></div> </dd> </dl> <dl> <dd> <div style="width:25%;"><strong>55 %</strong></div> </dd> </dl> <dl> <dd> <div style="width:35%;"><strong>55 %</strong></div> </dd> </dl> <dl> <dd> <div style="width:45%;"><strong>55 %</strong></div> </dd> </dl> <dl> <dd> <div style="width:55%;"><strong>55 %</strong></div> </dd> </dl> <dl> <dd> <div style="width:65%;"><strong>65 %</strong></div> </dd> </dl> <dl> <dd> <div style="width:75%;"><strong>75 %</strong></div> </dd> </dl> <dl> <dd> <div style="width:85%;"><strong>85 %</strong></div> </dd> </dl> <dl> <dd> <div style="width:95%;"><strong>95 %</strong></div> </dd> </dl> <dl> <dd> <div style="width:100%;"><strong>100%</strong></div> </dd> </dl>