css linear-gradient mit PHP von Rot zu 100% Grün ???

Dieses Thema im Forum "Serverseitige Programmierung" wurde erstellt von mischalemaus, 12. Februar 2017.

  1. mischalemaus

    mischalemaus Inaktiv

    Hallo,

    ich möchte ein Balkendiagramm erstellen was von rot nach grün geht prozentual.

    habe bei google bereits gesucht aber leider nix passendes gefunden.....

    mein Code

    PHP:
    $rabattbalken $summe*100/40;
            if(
    $rabattbalken '100') {
                   
    $rabattbalken '100';
            }
    HTML sieht so aus:

    HTML:
    <div style="width:100%; border: solid 1px #CCCCCC"><div style="width:<?=$rabattbalken ?>%; color:#FFFFFF; font-weight:bolder; text-align:center; background:#FF0000"><?=$rabattbalken ?>%</div></div>

    durch CSS kann ich das diagramm farblich darstellen aber nicht anhängig vom Prozentsatz...
    HTML:
    #grad {
                        /* IE10+ */
                        background-image: -ms-linear-gradient(top, #05C1FF 0%, #ffff00 100%);
    
                        /* Mozilla Firefox */
                        background-image: -moz-linear-gradient(top, #05C1FF 0%, #ffff00 100%);
    
                        /* Opera */
                        background-image: -o-linear-gradient(top, #05C1FF 0%, #ffff00 100%);
    
                        /* Webkit (Safari/Chrome 10) */
                        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #05C1FF), color-stop(100, #ffff00));
    
                        /* Webkit (Chrome 11+) */
                        background-image: -webkit-linear-gradient(top, #05C1FF 0%, #ffff00 100%);
    
                        /* W3C Markup */
                        background-image: linear-gradient(to bottom, #05C1FF 0%, #ffff00 100%);
                    }
    wäre über hilfe sehr dankbar
     
  2. dhu

    dhu Member

    Du kannst die Farbe als RGB eingeben im Css. Zudem kannst du das CSS auch als inline Skript in die PHP-Datei einfügen, dann kannst du den Wert mit PHP reinschreiben.

    <style>.grad {background:rgb(<?= $prozent ?>%, 0%, 0%)}</style>
     

Diese Seite empfehlen