【Gradient()】透過できるグラデーションで表示する

filterプロパティのGradient()では、要素と背景の間に透過できるグラデーションを表示する事ができます。

グラデーションの色の変化、開始位置などはパラメータで指定します。 書式などについて詳しくはfilterを参照して下さい。

書式

  • filter:progid:DXImageTransform.Microsoft.Gradient(★) ……… 透過可能なグラデーションを指定

★:GradientType=方向、他下記参照

GradientType=方向
グラデーションの方向を指定します。「0」で縦に変化、「1」で横に変化するグラデーションとなります。
StartColorStr=#00FFFFFF
グラデーション開始時の色(FFFFFFの部分)と透明度(00の部分)を指定します。00で完全に透過、FFで不透過となります。また後半の6ケタの部分にRGB値で色を指定します。色についてはカラーコード一覧を参照下さい。
EndColorStr=#00FFFFFF
グラデーション終了時の色(FFFFFFの部分)と透明度(00の部分)を指定します。00で完全に透過、FFで不透過となります。また後半の6ケタの部分にRGB値で色を指定します。色についてはカラーコード一覧を参照下さい。
Enabled
フィルタを実行するか指定します。有効にする場合「1」または「true」、無効にする場合は「0」または「false」を指定。

※StartColorStr,EndColorStrについてですが、例えば「StartColorStr=#00FFFFFF」の場合、最初の2桁(00の部分)が透明度の指定となります。00に続くFFFFFFの部分がRGB値による色指定となります。
なお透過しない場合はカラーネームによる色指定も可能です。

使用した時の例

.sample1 {
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#00ffffff, EndColorStr=#ffE7F1ED);
}
<p>フィルタを適用していない場合<br />
  Gradient Sample
</p>
<p class="sample1">sample1を適用した場合。Gradient(GradientType=0, StartColorStr=#00ffffff, EndColorStr=#ffE7F1ED)<br />
  Gradient Sample
</p>

ブラウザ上の表示例

フィルタを適用していない場合
Gradient Sample

sample1を適用した場合。Gradient(GradientType=0, StartColorStr=#00ffffff, EndColorStr=#ffE7F1ED)
Gradient Sample

対応ブラウザなどのデータ

プロパティ 独自拡張
対応ブラウザ Internet Explorer5.5~
※IE10以降は未対応

関連情報