Sass / Compass-将十六进制，RGB或命名的颜色转换为RGBA

css CSS

蛋蛋Davaid

2020-03-18

可能是Compass 101，但是有人写过mixin来设置颜色的alpha值吗？理想情况下，我希望mixin采取任何形式的颜色定义并应用透明度：

@include set-alpha( red, 0.5 );          //prints rgba(255, 0, 0, 0.5);
@include set-alpha( #ff0000, 0.5 );      //prints rgba(255, 0, 0, 0.5);
@include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);

第2024篇《Sass / Compass-将十六进制，RGB或命名的颜色转换为RGBA》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
米亚Harry 2020.03.18

rgba函数不适用于没有透明度的颜色，它将再次返回十六进制。毕竟，这并不意味着要将十六进制转换为rgba，我们只是从十六进制中获利而不允许使用alpha（尚未）。

rgba(#fff, 1) // returns #fff

因此，我做了一些小功能来构建rgb字符串。我现在不需要处理透明胶片。

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
乐逆天 2020.03.18

使用Sass内置的rgba功能

设置颜色的不透明度。

例子：

rgba（＃102030，0.5）=> rgba（16，32，48，0.5）
rgba（蓝色，0.2）=> rgba（0，0，255，0.2）

参数：（
颜色）颜色
（数字）alpha —一个介于0和1之间的数字

返回：（
颜色）

码：

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
Gil宝儿 2020.03.18 
from_hex(hex_string, alpha = nil);

从文档中：

从有效的CSS十六进制字符串创建新的颜色。前导哈希是可选的。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android