Sass 関数 カラー関数 不透明度 function_html/css_WEB-ITnose

Opacity 関数の紹介

色の透明度を制御するには、rgba、hsla、transform を使用する他に、opacity を使用して CSS で制御することもできますが、最初の 2 つは色の透明度のみです。チャネルは処理に使用され、後者は要素全体の透明度を制御します。 Sass では、一連の透明度関数も提供されていますが、この一連の透明度関数は主に色の透明度を処理するために使用されます:

alpha($color) /opacity($color)

: 色を取得します。透明度の値;

rgba($color, $alpha)

: 色の透明度の値を変更します。

opacify($color, $amount) / fade-in($color, $amount)

:色をより不透明にします

transparentize ($color, $amount) / fade-out($color, $amount)

: 色をより透明にします。

Opacity function-alpha()、opacity() 関数

alphpa()
および opacity() 関数は非常に単純で、以前に紹介した red()、green( ) 機能は非常に似ています。この関数の主な機能は、色の透明度の値を取得することです。色が透明度を指定しない場合、両方の関数で取得される値は 1 になります:

1 >> alpha(red)2 13 >> alpha(rgba(red,.8))4 0.85 >> opacity(red)6 17 >> opacity(rgba(red,.8))8 0.8

Opacity function - rgba() function

を作成できる rgba() 関数があります。 color 、色の透明度を変更することもできます。 2 つのパラメータを受け入れることができます。最初のパラメータは色で、2 番目のパラメータは設定する必要がある色の透明度の値です。

 1 >> rgba(red,.5) 2 rgba(255, 0, 0, 0.5) 3 >> rgba(#dedede,.5) 4 rgba(222, 222, 222, 0.5) 5 >> rgba(rgb(34,45,44),.5) 6 rgba(34, 45, 44, 0.5) 7 >> rgba(rgba(33,45,123,.2),.5) 8 rgba(33, 45, 123, 0.5) 9 >> rgba(hsl(33,7%,21%),.5)10 rgba(57, 54, 50, 0.5)11 >> rgba(hsla(33,7%,21%,.9),.5)12 rgba(57, 54, 50, 0.5)

Opacity function-opacify()、fade-in() function

これら 2 つの関数は、既存の色の透明度を追加するために使用され、色をより鮮やかにします。不透明。 2 つのパラメータを受け取ります。最初のパラメータは元の色で、2 番目のパラメータは増加する必要がある透明度の値です。値の範囲は主に 0 ～ 1 です。透明度の値を 1 より大きくすると、その値は 1 として計算され、その色には透明度がないことが示されます。

 1 >> opacify(rgba(22,34,235,.6),.2) 2 rgba(22, 34, 235, 0.8) 3 >> opacify(rgba(22,34,235,.6),.5) 4 #1622eb 5 >> opacify(hsla(22,34%,23%,.6),.15) 6 rgba(79, 53, 39, 0.75) 7 >> opacify(hsla(22,34%,23%,.6),.415) 8 #4f3527 9 >> opacify(red,.15)10 #ff000011 >> opacify(#89adde,.15)12 #89adde13 >> fade-in(rgba(23,34,34,.5),.15)14 rgba(23, 34, 34, 0.65)15 >> fade-in(rgba(23,34,34,.5),.615)16 #172222

fade-in() 関数は fade_in() 関数としても知られています。それらの機能は同等です。

Opacity function-transparentize()、fade-out() 関数

transparentize() および fade-out() 関数は、opacify() および fade-in() 関数とまったく同じです代わりに、色をより透明にします。これら 2 つの関数は、透明度の値を減算します。計算結果が 0 未満の場合、0 として計算されます。これは、完全に透明
を意味します。 ❤️