2017-08-24 6 views
1

私はプログレスバーの限界を分けるために画像を挿入したいと思います。私は緑側p:progressbar画像を挿入することはできますか?

ことが可能ですが続く私の小さな画像を、持っていると思いよりも

は、したがって右側には、赤のでしょうか?

+0

あなたはそれに打撃を与えましたか?例えば。 CSSの使用?非常に簡単に自分自身を試してみてください...進捗バー(クライアント側のHTML、サーバー側のxhtmlではない)のhtmlを調べて、創造的です。 CIient側はすべてhtml、css、javascriptだけです – Kukeltje

+0

もちろん私は試しました。私の問題は緑と赤を挿入することではありません。それは色の間に私の写真を持っていると私はまだそれを行うには苦労しています(申し訳ありませんが、私は初心者です) – Jean

+0

イメージは背景としても追加することができます... JSFを使用して、 CSS。そして、常に、いつもあなたが試みたものを投稿してください。テキストだけでなくコードでも使用できます。 See [ask]。基本的にこれはhtml/cssの普通の質問です。 – Kukeltje

答えて

2

クライアント側すべてがhtml、css、およびjavascriptのみです。 CSSの直線勾配は、すでに素晴らしい(10と90パーセントの境界)

.ui-progressbar { 
    background: -moz-linear-gradient(left, rgba(0,255,0,1) 0%, rgba(0,255,0,0) 10%, rgba(255,0,0,0) 90%, rgba(255,0,0,1) 100%); 
    background: -webkit-linear-gradient(left, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%); 
    background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1); 
} 

を動作し、あなたがイメージとそれを組み合わせるしたい場合は、参照

How do I combine a background-image and CSS3 gradient on the same element?

関連する問題