Pourcentage de couleur d'arrière-plan?

Question

Est-ce que je peux utiliser une couleur d'arrière-plan pour montrer dans 50% de ma division en utilisant css ou javascript ??? La case dans laquelle je veux faire ceci a une image de fond [png] que je veux remplir 50 % avec une couleur pour afficher les notes ...... Je peux utiliser une image de l'image de fond à moitié rempli mais je crois que cela ralentirait mon système de notation, est de leur façon, je peux remplir la case 50% avec une couleur ou Je dois recourir au remplacement de l'arrière-plan par une image à moitié remplie. Merci

Answer 1

Il est impossible de définir le remplissage de son parent de 50% en utilisant css. Vous allez devoir calculer la taille de la barre de progression. Alors disons que votre div est 100px (et a un fond blanc) et que vous voulez que la barre affiche 55%, créez un div à l'intérieur avec une longueur de 55px avec la couleur de la barre de progression comme arrière-plan.

Answer 2

Je ne sais pas s'il y a plus dans la div que juste la couleur de fond qui montre la progression, mais supposons que c'est la seule chose là-dedans. Tout ce que vous avez à faire est de vous assurer que la barre de progression a une largeur fixe, une hauteur et un débordement: caché.

Ensuite, vous placez un div à l'intérieur qui a la couleur que vous voulez comme une couleur d'arrière-plan, et la même largeur que le conteneur div. Les deux divs devraient avoir une position: la propriété définie, absolue ou relative n'a pas vraiment d'importance. Ensuite, la seule chose qui reste est de placer le div interne à une position que vous voulez, par exemple à gauche: -50%;

Seulement cette dernière partie, vous aurez besoin de javascript pour si vous voulez le faire dynamiquement. Quelque chose comme getElementById ('progression'). Style = 'left: -50%' devrait faire l'affaire.

Un rapide et sale (mais travailler) par exemple:

<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

Jetez un oeil à cette couleur de gradient de fond et étudier le code CSS utilisé pour le corps au début de celui-ci!

Il y a trois lignes de code CCS liés à l'action d'arrière-plan dans le code de l'instruction du corps:

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;*/ 
} 

initial a été trouvé sur le site http://www.webdesignseo.go.ro.