Sass函數--顏色函數--Opacity函數，sass--opacity

Sass函數--顏色函數--Opacity函數，sass--opacity

Opacity函數簡介

在 CSS 中除了可以使用 rgba、hsla 和 transform 來控制顏色透明度之外，還可以使用 opacity 來控制，只不過前兩者只是針對顏色上的透明通道做處理，而後者是控制整個元素的透明度。

在 Sass 中，也提供了系列透明函數，只不過這系列的透明函數主要用來處理顏色透明度：

•       alpha($color) /opacity($color)：擷取顏色透明度值；
•       rgba($color, $alpha)：改變顏色的透明度值；
•       opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明；
•       transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明。

 

 

 

Opacity函數-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函數-rgba()函數
有一個 rgba() 函數可以建立一個顏色，同時還可以對顏色修改其透明度。其可以接受兩個參數，第一個參數為顏色，第二個參數是你需要設定的顏色透明值。

 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函數-opacify()、fade-in()函數

這兩個函數是用來對已有顏色的透明度做一個加法運算，會讓顏色更加不透明。其接受兩個參數，第一個參數是原始顏色，第二個參數是你需要增加的透明度值，其取值範圍主要是在 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函數-transparentize()、 fade-out()函數
transparentize() 和 fade-out() 函數所起作用剛好與 opacify() 和 fade-in() 函數相反，讓顏色更加的透明。這兩個函數會讓透明值做減法運算，當計算出來的結果小於 0 時會以 0 計算，表示全透明。

 1 >> transparentize(red,.5) 2 rgba(255, 0, 0, 0.5) 3 >> transparentize(#fde,.9) 4 rgba(255, 221, 238, 0.1) 5 >> transparentize(rgba(98,233,124,.3),.11) 6 rgba(98, 233, 124, 0.19) 7 >> transparentize(rgba(98,233,124,.3),.51) 8 rgba(98, 233, 124, 0) 9 >> fade-out(red,.9)10 rgba(255, 0, 0, 0.1)11 >> fade-out(hsla(98,6%,23%,.5),.1)12 rgba(58, 62, 55, 0.4)13 >> fade-out(hsla(98,6%,23%,.5),.6)14 rgba(58, 62, 55, 0)