Sass / Compass – 将hex，RGB或指定颜色转换为RGBA

这可能是指南针101，但有谁写了一个混色，设置一个颜色的alpha值？ 理想情况下，我希望mixin采取任何forms的颜色定义，并应用透明度：

@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); 

Answer 1

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

Answer 2

我使用rgbapng指南针插件

rgbapng是一个Compass插件，用于提供跨浏览器兼容的RGBA支持。 它通过为不支持RGBA的浏览器即时创build单像素alpha透明PNG而工作。 它使用纯粹的Ruby ChunkyPNG库，导致无忧的安装和部署。

安装

 gem install compass-rgbapng 

用法

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

编译为：

 background: url('http://img.dovov.comrgbapng/000000bf.png?1282127952'); background: rgba(0, 0, 0, 0.75); 

Answer 3

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

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

Answer 4

 from_hex(hex_string, alpha = nil); 

从文档 ：

从有效的CSShexstring创build一个新的颜色。 前面的哈希是可选的。