Sass function -- color function -- Opacity function, sass -- opacity

Sass function -- color function -- Opacity function, sass -- opacity

Introduction to Opacity Functions

In CSS, you can use rgba, hsla, and transform to control the color transparency.OpacityTo control, but the first two are only for the transparent channel on the color, while the latter is to controlTransparency of the entire element.

In Sass, a series of transparent functions are also provided, but these transparent functions are mainly used to process color transparency:

• Alpha ($ color)/opacity ($ color): Gets the color transparency value;
• Rgba ($ color, $ alpha): Change the transparency of the color;
• Opacify ($ color, $ amount)/fade-in ($ color, $ amount): Make the color more opaque;
• Transparentize ($ color, $ amount)/fade-out ($ color, $ amount): Make the color more transparent.

 

 

 

Opacity functions-alpha () and opacity () Functions
Alphpa ()AndOpacity ()The function is simple.Red (), green ()And other functions are similar. The main function of this function is to obtain the transparency value of a color. If the color does not specify the transparency, the values of these two functions will be 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
There is an rgba () function that allows you to create a color and modify its transparency. It can accept two parameters. The first parameter is color, and the second parameter is the transparent value you need to set.

 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 functions-opacify () and fade-in () Functions

These two functions are used to add the transparency of existing colors, which will make the colors more opaque. It accepts two parameters. The first parameter is the original color, and the second parameter is the transparency value you need to add. The value range is mainly from 0 ~ Between 1. When the transparency value is greater than 1, it is calculated as 1, indicating that the color does not have any transparency.

 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

The fade-in () function is also called the fade_in () function. The function is equivalent.

 

 

 

Opacity function-transparentize (), fade-out () function
The transparentize () and fade-out () functions work exactly the opposite of the opacify () and fade-in () functions, making the color more transparent. These two functions allow the transparent value to be used for subtraction. When the calculated result is smaller than 0, it is calculated as 0, indicatingTransparent.

 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)