Graphique à colonnes statistiques à dégradé CSS_Experience Exchange

Utilisez l'outil de dessin pour créer une longueur de dégradé. Cela sera plus beau (largeur : 187px ; hauteur 15px)
L'idée originale est qu'à 12 %, l'image s'affiche de la gauche à la position 12%, et les 88 % restants ne sont pas affichés, mais ils n'occupent pas de zone (ils ne sont pas différents du bas de l'image 1px. Je suis allé le chercher dans l'après-midi et j'ai constaté qu'il était impossible de ne pas occuper une zone). .
Pour masquer le pourcentage restant de l'image, pensez-y d'abord. J'ai utilisé une image pour la lumière et l'obscurité, chacune représentant la moitié de la hauteur totale de l'image. J'ai écrit :

successivement de 10% à 100%, si vous ne voyez pas l'effet, passez à C'est OK, mais il doit y avoir du contenu dans la boîte
Je ne l'ai pas écrit hier soir, je l'ai cherché sur Google cet après-midi et je n'ai trouvé aucun dégradé de type 4. Je me suis inspiré de l'un des exemples
URL : http://apples-to-oranges.com/blog/post /css-for-bar-graphs/?id=55
dans : Complex CSS Bar. Graphique
J'ai tout de suite eu ça :

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Document sans titre</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>