divの背景を2種類の異なる画像を2種類の異なる％に設定することはできますか？

Question

W3Schoolsを見ても、これが可能かどうかはまだ分かりません。

考え方は、divを進行状況バーにすることです。 （はい、私はjQuery UIのプログレスバーを知っています）。100％の背景画像を1つ作成したいと思っていますが、残業時間は0％/ 100％から100％/ 0％までです。私は複数の背景画像を用意することが可能であることがわかり

はCSS使用して指定：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple

を私は唯一％の幅を有することにそのロジックを拡張する方法がわからないです。何か案は？おかげ

Answer 1

背景画像の幅を設定することはできません。しかし、その解決策は簡単です。 div自体は0％のプログレスバーです（つまり、アンロードされた背景イメージを持っています）。そして、実際の進行状況（0％から100％にアニメーション化され、背景イメージがロードされています） div の幅をの内側にアニメーション表示すると、進行状況を表すプログレスバーが表示されます。

Answer 2

このサイトでは、div要素内スパンを使用していくつかの例があります。

http://css-tricks.com/css3-progress-bars/

それは画像（ちょうどCSS3）を使用していないですが、あなたは簡単にそれが両方のスパンの背景画像を持って更新することができとdiv。 CSS3は複数の背景画像（http://www.css3.info/preview/multiple-backgrounds/）を許可していますが、あなたの例ではこれが最善の方法であるかどうかは分かりません。

Answer 3

position: absolute;またはposition: relative;を使用すると、ある画像を別の画像に重ねることができます。あなたはz-indexに注意する必要があります。このように、jQueryのanimate()関数を使用して、「進行状況メーター」として機能させたい画像の幅をアニメーション表示することができます（進行状況メーターの画像幅が0pxから100pxになると仮定します）：

$("#progress_meter").animate({"width": "100px"}, 5000); 

Answer 4

いいえ、最初のdivの上に別のdivを設定し、より高いz-indexプロパティを設定することができます。

例えば、以下のコードで、DIV-DIV-Bの上に次のようになります。

.div-a { 
    with: 50%; 
    height: 30px; 
    z-index: 2; 
} 

.div-b { 
    width: 100%; 
    height: 30px; 
    z-index: 1; 
}