在 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)
3 >> alpha(rgba(red,.8))
4 0.8
5 >> opacity(red)
7 >> 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 #ff0000
11 >> opacify(#89adde,.15)
12 #89adde
13 >> 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)
