Scss 将一个颜色根据透明度转换成 rgba 颜色

css yekong

rgba()

rgba() 函数主要用来将一个颜色根据透明度转换成 rgba 颜色。

rgba($red,$green,$blue,$alpha)  //将一个rgba颜色转译出来,和未转译的值一样
rgba($color,$alpha)  //将一个Hex颜色转换成rgba颜色

其中 rgba($color,$alpha) 函数作用更大,主要运用在这样的情形之中:假设在实际中知道的颜色值是 #f36 或者 red,但在使用中,需要给他们配上一个透明度,这个时候在原来的 CSS 中,首先需要通过制图工具,得到 #f36 或 red 颜色的 R、G、B 值,而不能直接使用(注意 css3 是可以的,但是存在浏览器兼容问题):

//CSS
color: rgba(#f36,.5); //在css中,这是无效的写法

但在 Sass 中,RGBA() 函数就能解决这个问题。我们先来看一个简单的例子,假设在变量中定义了一个基本的变量:

$color: #f36;
$bgColor: orange;
$borderColor:green;

同时给他们加上 .5 的透明度:

//SCSS

.rgba {
    color: rgba(#f36,.5);
    background: rgba(orange,.5);
    border-color: rgba(green,.5);
}
喜欢