備忘録的プログラミングリファレンス

hue-rotate() メソッド

 hue-rotate() メソッドは、色相環に関する引数の値から該当するその色値を返す CSS 関数です。引数の値は角度( deg )です。
 色の三属性(色相・明度彩度)に関するメソッドで、色相環を利用して色を変化させるために利用されます。
 0 または 0deg は変化はありません。90deg で90度位相の色。180deg で色相環で反対色になります。

hue-rotate() メソッド
.content {
	filter: hue-rotate( 180deg );
}
詳しくは「Example」を参照してください

 hue-rotate() メソッドは、filterbackdrop-filter プロパティといった <filter-value-list> を使用するプロパティで利用します。

ページ内 Index

構文(Syntax)

CSS

hue-rotate( angle )

引数

 引数の単位は、角度を示す deg や回転を示す turn です。0 がデフォルト値で、0deg と同じです。

Example

 hue-rotate() メソッドの例です。backdrop-filter プロパティで hue-rotate() メソッドを使用しています。
 backdrop-filter プロパティは子エレメントで使用します。 backdrop-filter プロパティは、子エレメントの後ろにある内容に影響があることが分かります。
 ここでは、親エレメントにテキストと背景画像の設定があります。子エレメントの位置を調整して親エレメントのテキストと背景がどのように表示されるかを試しています。