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 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>