6

要素の下端からnピクセルのストップでグラデーションを作成する方法はありますか？

たとえば、Moz / Firefoxの場合、次のようになります。

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

このグラデーションには、ボックスの最上部に対して同じことを行うためのコンパニオングラデーションがあることにも注意してください。したがって、実際には、ffの場合はcssは次のようになり、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);
4

4 に答える 4

5

現在のWebkit構文ではそれを行うことはできません。でも朗報です！基本的に-moz構文に一致し、これを可能にする新しい-webkit-linear-gradientプロパティ（webkitブログで発表されたばかり）があります。この構文は最も信頼のおけるCSS3構文になるはずなので、ある時点で-webkitと-mozを完全に削除できるようになります。（古い-webkit-gradientプロパティは無期限に機能し続けますが、今後は推奨されません。）

于 2011-01-17T05:46:22.850 に答える
5

-webkit-background-sizeグラデーションのサイズをピクセル単位で設定background-positionし、下部に配置するために使用できます。

于 2011-01-17T19:36:51.437 に答える
4

あなたが何を求めていたのかよくわかりませんが、これを使用してピクセルのグラデーションを停止することができます-

background-size:100% 31px; background-repeat:no-repeat;
于 2012-08-16T15:50:44.467 に答える
0

このようなことを試しましたか？

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

このサイトがもっとお役に立てば幸いです。

于 2011-01-16T20:41:44.750 に答える