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

86

可能是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);

— 帕特·纽维尔
source

179

使用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);

— 最大拍子
source

4

不敢相信我不只是尝试了。非常感谢您

— Pat Newell

@jon您能详细说明我的答案有什么令人困惑的地方，以便我改善吗？

— maxbeatty

@maxbeatty我不确定我的注释发生了什么，但是我对“ ==>”感到困惑……事后看来，这很明显，但是当您感到迷茫时，很难从注释中分辨出所需的代码。我想可以通过仅在代码块中包含实际可用的代码来使其更加清晰。

— 乔恩·

@jon的blockquote直接来自Sass文档。不仅仅是链接到相关的内置功能。我认为在答案中包含相关文档会有所帮助。抱歉，这令人困惑。

— maxbeatty

哦，DUH。来尝试在框外思考之前，请始终先看框框。嘘！

— dudewad

8

我使用rgbapng指南针插件

rgbapng是一个Compass插件，用于提供跨浏览器*兼容的RGBA支持。它为不支持RGBA的浏览器动态创建单个像素的alpha透明PNG。它使用纯Ruby ChunkyPNG库，可轻松进行安装和部署。

安装

gem install compass-rgbapng

用法

@include rgba-background(rgba(0,0,0,0.75));

编译为：

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

— 伊利亚·乔利（Ilia Choly）
source

哇...太棒了。罗盘的力量使我震惊。感谢您的答复

— 帕特纽厄尔

7

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

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

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

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

— 卡洛斯·马丁内斯（CarlosMartínez）
source

2

IE的## AARRGGBB格式也有ie-hex-str（）：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */

— 迈克·斯潘豪威尔
source

2

from_hex(hex_string, alpha = nil);

从文档中：

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

— 用户名
source