Prozentsatz der Hintergrundfarbe?

Question

Ist ihre beliebige Weise kann ich eine Hintergrundfarbe verwenden, um in 50% meiner Abteilung mit CSS oder Javascript ??? Die Box, in der ich dies tun möchte, hat ein Hintergrundbild [Png], die ich 50 füllen möchte % mit einer Farbe zum Anzeigen von Bewertungen ...... Ich kann ein Bild des halb gefüllten Hintergrundbildes verwenden, aber ich glaube, das würde mein Bewertungssystem verlangsamen, ist ihre Art, wie ich die Box 50% mit einer Farbe füllen kann oder Ich muss zurückgreifen, um den Hintergrund durch ein halb gefülltes Bild selbst zu ersetzen. Danke

Answer 1

Es gibt keine Weise, es zu setzen, um sein Elternteil mit css 50% zu füllen. Sie müssen die Größe der Fortschrittsleiste berechnen. Also sagen wir, Ihr div ist 100px (und hat einen weißen Hintergrund) und Sie möchten, dass der Balken 55% anzeigt, erstellen Sie ein div darin mit einer Länge von 55px mit der Farbe des Fortschrittsbalkens als Hintergrund.

Answer 2

Ich weiß nicht, ob es mehr im div als nur die Hintergrundfarbe gibt, die den Fortschritt anzeigt, aber nehmen wir an, es ist das einzige Ding dort. Alles, was Sie tun müssen, ist sicherzustellen, dass der Fortschrittsbalken eine feste Breite, eine Höhe und einen Überlauf hat: versteckt.

Dann platzieren Sie ein div in das, das die gewünschte Farbe als Hintergrundfarbe und die gleiche Breite wie der Container div hat. Beide Divs sollten eine Position haben: Eigenschaft definiert, absolut oder relativ spielt keine Rolle. Dann bleibt nur übrig, den inneren Teil auf eine gewünschte Position zu setzen, zum Beispiel links: -50%;

Nur dieser letzte Teil benötigen Sie Javascript für, wenn Sie es dynamisch machen möchten. Etwas wie getElementById ('progress'). Style = 'left: -50%' sollte den Trick machen.

A quick and dirty (aber funktioniert) Beispiel:

<div style="width: 200px; height: 2em; overflow: 
    hidden; position: relative; padding: 1px; border: 1px solid red"> 

    <div style="width: 200px; height: 2em; 
     background: blue; position: relative; left: -50%;"> 

     &nbsp; 
    </div> 

</div> 

 

Answer 3

Werfen Sie einen Blick auf diesen Hintergrund Farbverlauf und studieren den CSS-Code für den Körper am Anfang davon verwendet!

Es gibt drei Linien von CCS-Code im Zusammenhang mit dem Hintergrundobjekt im Körper Anweisung Code:

body { 
    font: 12px/18px Verdana, Arial, Tahoma, sans-serif; 
    color: #001133 /* Other test colors: #006DD9 #444*/; 
    /*background: #F4F4F4 url(i/bg.gif) - Another test;*/ 
    **background: -moz-linear-gradient(bottom, #ffffff, #3393C5); 
    background: #3393C5 -webkit-gradient(linear, left top, left bottom, color- stop(0.05, #3393C5), color-stop(1.00, #ffffff)) no-repeat; 
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#3393C5',En dColorStr='#FFFFFF');** 
    /*margin: 0px auto;*/ 
} 

Initiale auf http://www.webdesignseo.go.ro Webseite gefunden wurden.