Sass Function--color function--opacity function

Introduction to Opacity functions

In addition to using Rgba,Hsla , and transform to control color transparency in CSS, you can use opacity to control it, except that the first two are only for color transparent channels are processed, while the latter controls the transparency of the entire element .

In Sass, a series of transparent functions are provided, except that this series of transparent functions are mainly used to deal with color transparency:

• Alpha ($color)/opacity ($color): Gets the color transparency value;
• Rgba ($color, $alpha): Change the transparency value 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 function-alpha (), opacity () function
ALPHPA () and opacity () function is simple, with the Red (), green () Such functions are similar. The main function of this function is to Gets the transparency value of a color . If the color does not specifically specify transparency, then the two functions get the :

1 >> alpha (red)2 13 >> Alpha (RGBA (red,.8))4 0.8 5 >> opacity (red)6 17 >> opacity (Rgba (red,.8))8 0.8

Opacity function-rgba () function
There is an rgba () function that creates a color and can also modify its transparency for color. It can accept two parameters, the first parameter is the color, the second parameter is the color transparency value you need to set.

1>>Rgba (red,.5)2RGBA (255, 0, 0, 0.5)3>>Rgba (#dedede,. 5)4RGBA (222, 222, 222, 0.5)5>>Rgba (RGB (34,45,44),. 5)6Rgba (34, 45, 44, 0.5)7>>Rgba (Rgba (33,45,123,.2),. 5)8Rgba (33, 45, 123, 0.5)9>>Rgba (HSL (33,7%,21%),. 5)TenRgba (57, 54, 50, 0.5) One>>Rgba (Hsla (33,7%,21%,.9),. 5) ARgba (57, 54, 50, 0.5)

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

These two functions are used to perform an addition operation on the transparency of an existing color, which makes the color more opaque . It accepts two parameters, the first parameter is the original color , the second parameter is the transparency value you need to increase, and its value range is mainly between 0~1 . When the transparency value increases to more than 1 o'clock , it is calculated as 1 , indicating that the color does not have any transparency.

1>> opacify (Rgba (22,34,235,.6),. 2)2Rgba (22, 34, 235, 0.8)3>> opacify (Rgba (22,34,235,.6),. 5)4 #1622eb5>> opacify (Hsla (22,34%,23%,.6),. 15)6Rgba (79, 53, 39, 0.75)7>> opacify (Hsla (22,34%,23%,.6),. 415)8 #4f35279>> Opacify (red,.15)Ten #ff0000 One>> Opacify (#89adde,.15) A #89adde ->> fade-inch(Rgba (23,34,34,.5),. 15) -Rgba (23, 34, 34, 0.65) the>> fade-inch(Rgba (23,34,34,.5),. 615) - #172222

where the fade-in () function is also called the fade_in () function. Its effect is equivalent.

Opacity function-transparentize (), fade-out () function
The transparentize () and fade-out () functions work just as opposed to the opacify () and fade-in ( ) functions, Make the color more transparent . These two functions will let the transparency value do subtraction , when the calculated result is less than 0 will be calculated as 0 , indicating full transparency .

1>> Transparentize (red,.5)2RGBA (255, 0, 0, 0.5)3>> Transparentize (#fde,.9)4RGBA (255, 221, 238, 0.1)5>> transparentize (Rgba (98,233,124,.3),. 11)6RGBA (98, 233, 124, 0.19)7>> transparentize (Rgba (98,233,124,.3),. 51)8RGBA (98, 233, 124, 0)9>> fade-out (red,.9)TenRGBA (255, 0, 0, 0.1) One>> fade-out (Hsla (98,6%,23%,.5),. 1) ARGBA (58, 62, 55, 0.4) ->> fade-out (Hsla (98,6%,23%,.5),. 6) -RGBA (58, 62, 55, 0)

Sass Function--color function--opacity function