web-dev-qa-db-ja.com

CSSまたはJavaScriptを使用して、不透明にフェードするグラデーションを作成できますか？

WebKitには、CSSグラデーションを作成する機能が導入されています。たとえば、次のコードの場合：

-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));

ただし、CSSを使用して不透明度のグラデーションを設定することはできますか？グラデーションを片側で単色にし、反対側で不透明度をゼロにしていきます。

ブラウザ間の互換性は重要ではありません。 Google Chromeで動作させるために必要です。

CSSを使用してこれを行う方法はありますか？そうでない場合、JavaScript（jQueryではない）を使用して同様のことができますか？

ご協力いただきありがとうございます。

javascriptcssgoogle-chromeopacitygradient
28
木川 炎星

はい

色については、rgba（x、y、z、o）を使用します。ここで、oは不透明度です。

うまくいくはず

例えば.

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));

編集：最終値（不透明度）の場合1は不透明、0は透明

17
Jasper

うん、rgba(red, green, blue, alpha)は何を使うべきか http://www.w3.org/TR/css3-color/#rgba-color の例（試してみよう- jsFiddle ）：

/* Webkit */
background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, rgba(0,0,0,0.0)), /* Top */
    color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
);

/* Gecko */
background: -moz-linear-gradient(
    center bottom,
    rgba(0,0,0,1.0) 0%, /* Bottom */
    rgba(0,0,0,0.0) 100% /* Top */
);
16
antonj

テストされていませんが、これは機能するはずです（FFではこれは機能します（異なる構文で）-safari/webkitがrgbaを知っているかどうかはわかりません）。

-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(0,0,0,0)));
2
oezi