背景色の割合？

Question

いずれにしても、CSSやJavaScriptを使用して私の部門の50％で背景色を使用することはできますか？私がこれをやりたいボックスには、背景をイメージ[png]評価を表示するための色で％を使用することができます......私は半分に満たされた背景画像の画像を使用することができますが、私は自分の評価システムを遅くすると信じて、ありがとう

Answer 1

cssを使用して50％の親を埋めるように設定する方法はありません。プログレスバーのサイズを計算する必要があります。 したがって、divが100px（白い背景）で、バーが55％になるようにするには、プログレスバーの色を背景として55pxの長さでdivを作成します。

Answer 2

進捗状況を示す背景色だけではなく、そこに唯一のものがあると想定します。 あなたがしなければならないことは、プログレスバーが一定の幅、高さ、オーバーフロー：隠されていることを確認することです。

次に、背景色として必要な色とコンテナdivと同じ幅のdivを配置します。両方のdivにはポジションがあります：定義されたプロパティ、絶対または相対は本当に重要ではありません。それで、残っている唯一のことは、内部divをあなたが望む位置、例えば左にセットすることです：-50％;

ダイナミックにしたい場合は、この最後の部分のみjavascriptが必要です。 getElementById（ 'progress'）のようなもの。style = 'left：-50％'はトリックを行うべきです。

迅速かつ汚い（しかし作業）例：

<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

このような背景のグラデーションの色を見て、それの初めにボディに使用CSSコードを勉強！

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

初期はhttp://www.webdesignseo.go.roウェブサイト上で発見された：

は、身体の文のコード内の背景主題と接続CCSの3行のコードがあります。