2011-01-16 4 views
5

停止のあるグラデーションを作成する方法はありますか?nピクセルの下端から何ピクセルですか?また、この勾配はボックスの最上部に同じことを行うためのコンパニオン勾配を有することに留意すべきであるCSS 3下からnピクセルのグラデーション - Webkit/Safari

-moz-linear-gradient(center bottom , #f00 2%, #d00 31px)

:よう

はMOZ/Firefoxで例えば、それはなります。だから、本当にCSSはFFのように見えますし、Webkitのために再現する必要があります:

background-image: 
     -moz-linear-gradient(center top , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px), 
     -moz-linear-gradient(center bottom , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px); 

答えて

5

現在のWebkit構文では、これを行うことはできません。しかし、良いニュース!基本的に-mozの構文と一致する新しいWebkit-Line-Gradeプロパティ(Webkitのブログでちょうど発表されている)があり、これを行うことができます。この構文は、CSS3の構文が確定するはずなので、いつでも-webkitと-mozを削除することができます。 (旧-webkit-勾配特性が無期限に動作し続けますが、今後に好まれていません。)

+0

実際に私はこのバグレポートを見て、今月からパッチを見直しました...私は、おそらく、私が現在の文法に欠けていた何かがあったと思っていました。興味のある他の誰でも、新しい構文がv528 +(Nightly Build)で実装されています。 – prodigitalson

0

あなたはこれを試しましたか?

-webkit-gradient(linear, center bottom , #f00 2%, #d00 31px) 

私はthis siteがあなたにもっと役立つことを願っています。

+1

問題は 'カラーstop'のみの割合(またはPRECENTAGEの十進表記)を取り、決定的な価値ではありません。その間、「ポイント」は停止位置ではなく、方向のみを描くように見える。すべてのpxの定義はボックスの上部から取得されます。私は傾きが釣り合いにあってはならないのでパーセンテージを計算するべきではありません。なぜなら、ボックスが10pxか1000pxの高さであるかどうかは常にボックスの底から正確に31pxだけ止まるべきです。私はイメージを使用することができますが、私はできるだけコンセンサスとしてCSSを維持しようとしています。 – prodigitalson

5

あなたは一番下にそれを置くために、画素とbackground-position中サイズに勾配を-webkit-background-sizeを使用することができます。

+0

それはおそらく動作する可能性があります...それを見て病気。ありがとう! – prodigitalson

4
あなたは後何であったか

かなりわからないが、私はこれを使用してPXに勾配を停止するために管理する -

background-size:100% 31px; background-repeat:no-repeat; 
+0

あなたは正しいです!ありがとう! ここにJSFiddleがあります。 http://jsfiddle.net/cfTwf/ – ProblemsOfSumit

+0

これは私のためにも役立ちました –

関連する問題