グラデーションとフェード

グラデーションとフェードのパラメーターは、画像の上に色のグラデーションを描画したり、画像そのものを端に向かってフェードアウトさせたりします。この2つを組み合わせることで、画像の上に重ねていたCSSのオーバーレイを置き換えられます。見出しテキストの背後のスクリム、ビネット、カラーウォッシュ、ページの背景に溶け込む画像などです。

挙動はCSSのグラデーションの規則に従いますが、各ページに記載した例外があります。

8桁のカラー値は AARRGGBB（アルファ値が先頭）です。 CSSではアルファ値が末尾に来るため、スタイルシートからコピーした値はそのままでは正しく動作しません。cc000000 は不透明度80%の黒、000000cc は透明な黒です。

gradient は画像の上に色を描画します。gradient-mask=true を指定すると、代わりに画像自体がグラデーションに沿ってフェードアウトします。fade は画像の端を透明に向かってぼかします。

不正な値は、CSSが無効な宣言を無視するのと同様に、警告なく無視されます。無視されたパラメーターは X-Imgix-Params レスポンスヘッダーからも除外されるため、入力ミスを見つける最も早い手段になります。

処理の順序： まずグラデーション、次にフェード、その後にボーダー、パディング、透かし、テキストが描画されます。そのためテキストはスクリムの上に配置され、これがスクリムを有用にしています。

同じパラメーターは mark-gradient*、mark-fade*、blend-gradient*、blend-fade* としてレイヤーにも使用でき、mark-fade[1]=20 のようなインデックス付きの指定にも対応しています。

これらのパラメーターは Video API でも使用できますが、いくつかの違いがあります。各ページの注記を参照してください。

補足

• provenance=c2pa では gradient と fade が編集として記録されます。
• フェードさせた画像に ドロップシャドウ を適用すると、柔らかくなった端の部分に黒が透けて見えます。これは ENG-2455 で追跡されています。